如何避免触发两个功能的"点击"？

Question

嗨我有两个JS函数:

1. $('button').click(function() 内 $(document).ready

2. $(document).on('click','button', function()

第二个功能是为动态生成的按钮设计.我遇到的问题是,当我单击与第一个功能关联的按钮时,第二个功能也会被触发.我怎么能避免这个？

PS:因为我给每个按钮命名并且这个冲突根本不影响功能,但我认为一次点击触发两个功能不是很聪明:(

Answer 1

那是因为事件传播.

您可以在第一个处理程序中停止事件传播,以防止触发动态处理程序.

$('button').click(function (e) {
    e.stopPropagation();
    //your code
})

但更合适的解决方案是为所有动态按钮元素添加一个公共类,并仅使用委托处理程序来定位它们

<button class="mydynamic"></button>

然后

$(document).on('click','button.mydynamic', function(){
});