Question

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

最初只有一个按钮A的事件为binded，并且手动在两个按钮（A＆amp; 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事件之前被绑定。这是细分：

$('button')创建按钮.a和按钮.b的集合。
.trigger('click');遍历集合中的每个按钮并生成点击事件。
按钮.a接收click事件并运行您在页面加载时为其注册的事件处理程序。
.b的事件处理程序在.a的事件处理程序的回调中注册。
按钮.b从.trigger('click');收到点击事件，因为它是集合中的第二个。
按钮.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

执行的顺序是：

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

即使$("button").trigger("click")是一行，它也是一种循环，就像它是：

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

Jquery停止触发事件

4 个答案: