javascript - Jquery停止事件触发

Question

我有一个简单的场景，如 fiddle 所示

最初事件是 绑定(bind) 只有一个按钮 A 和 click 事件在两个按钮(A 和 B)中手动触发。

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

但是回调还是执行了。我哪里错了？

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 的事件在该按钮上触发点击事件之前被绑定(bind)。这是分割:

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

因为你只想触发按钮 .a 被点击，下面的任何一个都适用于你当前的文档:

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

编辑 虽然这与问题无关，但也许您打算只为 .b 注册事件一次，这样做:

$('.a').one('click', 函数 (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>

SECOND EDIT 如果你想停止事件传播，你需要添加另一个事件监听器，像这样:

$(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>