Question

如果有一个奇怪的问题，希望你们能在这里帮助我。

在我的javascript代码中，我使用

创建一个div

<div class="..." id="getMoreOfX"><span class="...">More info</span></div>

就在下面我尝试使用以下命令附加事件处理程序：

$(document).on('click', '#getMoreOfX', function(){
  alert("Click: " + $(this).attr('id'));
});

不会抛出任何错误，但它不会任何。但奇怪的是，仅仅将'click'改为'mouseenter'（或者就此而言'mouseleave'）确实会让它做到它应该做的事情。特别是这最后一个属性让我困惑。

关于可能导致这种情况的任何想法？

N.B。 jquery版本是1.7，我已经在FF，Opera和Chrome中测试了它。

Answer 1

jQuery中的事件委派基于以下原则：JavaScript中的事件将DOM树一直冒泡（或传播）到文档。但是，如果您在DOM中较低级别的元素上有事件处理程序，以防止传播发生 - 通过调用event.stopPropagation()或return false - 那么事件委派将不再起作用。

例如，如果我有以下HTML：

<div id="outer">
  <div id="inner">
    Testing event delegation <br/>
    <input type="button" value="Click me" id="test-button"/>   
  </div>
</div>

然后添加以下jQuery：

$('#outer').on('click', '#inner', function(e) {
  console.log(this.id);
});

然后单击<div id="inner">内的任何位置将导致inner输出到控制台。但是，如果我将以下事件处理程序添加到按钮：

$('#test-button').click(function(e) {
 return false; 
});

然后单击文本继续像以前一样运行 - inner输出到控制台 - 但是单击按钮将导致没有输出任何内容，因为事件传播已被阻止。

这可以在this jsFiddle中找到。

jquery：on（'click'，...）不起作用，on（'mouseenter'，...）

1 个答案: