我该如何避免点击＆＃39;触发两个函数？

Question

您好我有两个JS函数：

在$('button').click(function()
中

1. $(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(){
});

Answer 2

将动态生成的按钮包裹到div中：

<div class="wrap">...buttons... </div>

并听取div：

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

会更有效率。

Answer 3

您可以找到event.stopPropagation() here

的文档