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()