事件监听器中的 jQuery 绑定(bind)事件

Question

我有一个链接，其中绑定(bind)了一个单击事件监听器。单击时，它将一个单击事件监听器附加到文档，这次该事件是命名空间的，以便我可以轻松删除它。附加第二个事件后，它会立即被触发。为什么会出现这种情况？我最好的猜测是，当新事件附加到文档时，该事件仍在 dom 树中冒泡。因此它会触发这两个事件。请参阅以下JSFiddle .

HTML

<a href="#" id="example">Click Me</a>

Javascript

$('#example').on('click', function(e) {
    $(document).on('click.example', function(e) {
        alert('example event triggered');
    });
});

我想要完成的是，单击按钮时插入一个 dom 元素。插入时，我想将一个事件监听器附加到文档，触发时检查事件目标，以检测插入元素之外是否发生任何单击事件。如果目标在其中，则不应执行任何操作。如果目标位于元素之外的任何位置，它应该隐藏该元素。

Answer 1

这是因为事件传播

$('#example').on('click', function(e) {
  $(document).on('click.example', function(e) {
    alert('example event triggered');
  });
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="example">Click Me</a>

当事件仍在 anchor 元素中时，您正在注册处理程序，并且该事件绑定(bind)到作为当前元素的祖先的文档对象。因此，现在当事件最终传播并到达 document 对象时，它将找到与其绑定(bind)的点击处理程序并触发它。

注意:您不应该只在每次点击中添加新的处理程序...希望您已经处理好它