javascript - 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 时附加事件，要么需要使用事件委托(delegate)。

    $('#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>