Question

在下面的代码中，当我第一次单击带有“编辑按钮”类的按钮时，我无法分辨为什么我的控制台会打印“hi”。我第二次打算打印控制台，因为“update-now”类已添加到按钮中。有谁知道这是为什么？谢谢！

$(function() {
    $('.edit-button').on('click', function(e) {
      $( this ).addClass('update-now').html('Update');
    });
});



$(document).on('click', "div.update-now", function() {      
    console.log('hi');
});

Answer 1

这是因为事件传播而发生的。事实上，事件委托使用事件冒泡。现在，在您的情况下，您通过使用事件委派签名将事件绑定到.update-now。

您正在其点击事件中的另一个按钮中添加一个类update-now，以便该事件传播直到它与文档相遇，之后它将调查是谁引发了该事件。这里带有类update-now的div已经开始传播。因此事件处理程序被触发并在控制台中打印。

因此，如果您在添加课程update-now之后/之前停止传播，则不会打印hi消息，

$('.edit-button').on('click', function(e) {
  $( this ).addClass('update-now').html('Update');
  e.stopPropagation()
});

DEMO

我建议的解决方案，

$('.edit-button').on('click', function(e) {
  $( this ).addClass('update-now').html('Update');
  $(this).off("click");
  e.stopPropagation();
});

$('body').on('click', ".edit-button.update-now", function() {      
  alert('hi');
});

jQuery .on（）在使用addClass时触发

1 个答案:

DEMO

DEMO