JQuery-更改一个元素的ID并在点击时调用一个函数

Question

我有一个具有某个ID的元素，我更改了它的ID，当我单击该元素（现在使用新的ID）时，它仍然调用前一个函数ID

$('#1st').click(function(){ 
 
    $('#1st').attr('id','2nd'); 
 
    alert("id changed to 2nd"); 
 
}); 
 
$('#2nd').click(function(){ 
 
    alert("clicked on second"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="javascript:;" id="1st">Click</a>

实施例是here

Answer 1

因为你的元素存在之前添加事件。它没有找到一个元素。请在更改ID时附加事件，或者需要使用事件委派。

$('#1st').on("click.one", function(e) { 
 
     $('#1st').attr('id', '2nd'); 
 
     alert("id changed to 2nd"); 
 
     e.stopPropagation(); 
 
     $(this).off("click.one"); 
 
    }); 
 
    $(document).on("click", '#2nd', function() { 
 
     alert("clicked on second"); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#" id="1st">Click</a>

Answer 2

尝试做这种方式jsFiddle

$(document).on('click', '#2nd', function(){ 
 
\t \t alert("clicked on second"); 
 
\t }) 
 
\t .on('click', '#1st', function(e) { 
 
\t \t $('#1st').attr('id','2nd'); 
 
\t \t alert("id changed to 2nd"); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#" id="1st">Click</a>

详情可参见Jquery's .on() versus .click()