更新ID和jQuery事件处理程序时出现问题

时间:2019-01-28 11:01:16

标签: javascript jquery forms next id

我正在尝试制作某种形式,但是我坚持前进到第三步。

我的下一个按钮确实具有这样的递增ID:

$('#to-q-2').click(function (e) {
    e.preventDefault();
    $(this).attr("id", "to-q-3");
})

因此ID已更新。 但是当我再次单击时:

$('#to-q-3').click(function(e) {
        e.preventDefault();
        alert('stop');
});

什么都没有发生。我猜jQuery没有更新DOM,但是我不知道该怎么做。有任何线索吗?

1 个答案:

答案 0 :(得分:2)

您需要将click事件添加到document中,以便它可以查找click事件的初始绑定中不存在的新元素,这样您就可以动态地添加click事件添加的元素。您可以使用:

$(document).on('click', '#to-q-3', function() {...})

请参见下面的工作示例:

$(document).on('click', '#to-q-2', function (e) {
    e.preventDefault();
    $(this).attr("id", "to-q-3");
});

$(document).on('click', '#to-q-3', function(e) {
  e.preventDefault();
  alert("stop");
});
#to-q-2 {
  color: red;
}

#to-q-3 {
  color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="to-q-2">Click this div</div>