Jquery停止触发事件

Question

我有简单的场景，如小提琴所示

最初事件仅在一个按钮A上binded ，并且手动在按钮（A和B）中触发click事件。

现在在按钮A的事件处理程序中，按钮B的事件处理程序被绑定。 预计不会执行B的回调，因为它在事件被触发后被绑定。

但回调仍然执行。 我哪里错了？

HTML：

<div>
    <button class="a">botton A</button>
    <button class="b">button B</button>
</div>

JS：

$(function () {
    $('div').on('click', '.a', function (e) {
        e.preventDefault();
        $('div').on('click', '.b', function () {
            alert('Can"t see me')
        });
    });
    $('button').trigger('click');
});

FIDDLE LINK

编辑：
我在我的项目中有这个场景，现在我知道为什么会发生这种情况:)。 但是我如何阻止事件传播？

Answer 1

$('button').trigger('click'); 按两个按钮在文档标记中出现的顺序触发单击事件。 由于事件冒泡是同步的，因此.b的事件在该按钮上触发click事件之前被绑定。 这是细分：

1. $('button')创建按钮.a和按钮.b的集合。
2. .trigger('click'); 遍历集合中的每个按钮并生成单击事件。
3. 按钮.a接收click事件并运行您在页面加载时为其注册的事件处理程序。
4. .b的事件处理程序在.a的事件处理程序的回调中注册。
5. 按钮.b从.trigger('click');接收点击事件.trigger('click'); 因为它是该系列的第二名。
6. 按钮.b的事件侦听器的回调会触发弹出警报。

由于您只想触发单击按钮.a ，因此以下任何一项都适用于您当前的文档：

• $('.a').trigger('click');
• $('button.a').trigger('click'); （虽然这是多余的）
• $('button').get(0).trigger('click'); （因为.a是第0个索引按钮元素）

编辑虽然这与问题无关，但也许你只想为.b注册一次事件，这样做：

$('.a').one('click', function (e) {

 $(function() { $('.a').one('click', function(e) { e.preventDefault(); $('div').on('click', '.b', function() { alert('Can\\'t see me'); }); }); $('.a').trigger('click'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class="a">button A</button> <button class="b">button B</button> </div> 

第二次编辑如果要停止事件传播，则需要添加另一个事件侦听器，如下所示：

 $(function() { $('.a').one('click', function() { $('.b').on('click', function(e) { e.stopPropagation(); alert('Can see me'); }); $('div').on('click', '.b', function() { alert('Can\\'t see me'); }); }); $('button').trigger('click'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class="a">button A</button> <button class="b">button B</button> </div> 

Answer 2

这是因为$('button').trigger('click'); 。

这会触发每个按钮的点击 - 首先它点击.a ，它将点击处理程序绑定到.b ，然后点击.b 。

在我的实验中，只需按下按钮.b首先修复此问题，但我不会依赖它。

Answer 3

这可能是因为在所有按钮实例上串行触发了点击...

button a点击首先执行...在其回调中绑定button b单击回调...

...然后... button b点击执行...因此b的回调被执行...

所有这一切都发生在一次调用中： $('button').trigger('click');

编辑：其他人可能在我有...之前已经回答了这个问题但是迭代触发点击正确的元素：

$('.a').trigger('click');

Answer 4

执行顺序是：

• 绑定.a
• 触发第一个按钮（例如，a）
• 回调a：bind b
• 触发第二个按钮（b）
• 回调b

甚至$("button").trigger("click")是一行，它是一种循环 ，就像它是这样的：

var buttonElms = $("button");
for (var index in buttonElms) {
   buttonElms[index].trigger("click");
}