0

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

在我的 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”）确实会导致它做它应该做的事情。尤其是最后一个属性让我感到困惑。

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

NB jquery 版本是 1.7，我在 FF、Opera 和 Chrome 中对此进行了测试。

4

1 回答 1

0

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输出到控制台 - 但单击按钮将不会输出任何内容，因为已阻止事件传播。

这可以在这个 jsFiddle中观察到。

于 2013-01-09T16:53:00.763 回答