Question

我遇到了一个我不知道解决方案的问题。

假设我有这个HTML标记（由服务器动态生成或只是一个静态文件）：

<ul class="myList">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<!-- ... -->
<li><a href="page1000.html">Page 1000</a></li>
</ul>

我想将点击事件处理程序绑定到＆lt; a＆gt;标签。通常情况下，我会写出

$('.myList').find('a').click(function() {});  /* Or something similar */

将对所有锚标记执行隐式迭代，以将click事件绑定到每个锚标记。但是，我被告知这是一项昂贵的操作。

我被问到是否有某种方法只能附加一个事件监听器（在ul标签上）并使用事件冒泡来确定单击了哪个锚标记。我从未遇到过这样的事情，所以我不知道答案。显然，有一个答案。有人知道如何在元素上放置单个事件监听器并让它知道单击了哪个子元素吗？（我仍然需要使用event.preventDefault（）来阻止默认的单击事件。）

Answer 1

查看delegate() - 这正是您所要求的。

$('ul.mylist').delegate('a', 'click', function() {
  // ... your code ...
});

您可以获得jQuery处理程序的所有好处，而无需对所有这些元素进行绑定。

Answer 2

您可以访问event.target，这将是启动该活动的元素。

$('.myList').click(function(event) {
   var target = $(event.target);
});

jsFiddle

但是，Pointy's answer似乎更容易使用。

Answer 3

如果您使用的是jQuery＆gt; = 1.7版本，则.on()方法会取代.delegate()。在jQuery 2.x和1.11 .delegate()中，只需调用.on()：

delegate: function( selector, types, data, fn ) {
        return this.on( types, selector, data, fn );
}

在这种情况下使用它：

$(".myList li a").on("click", function(e) {
  //Code here, and you can use e.preventDefault(); to avoid the default event.
});

Answer 4

您附加的功能将包含一个事件参数，其中包含在event.target中单击的对象。

 $(.....).click(function(event){  ....  });

另一种解决方案，更复杂，但更灵活，虽然在这种情况下你不需要它，但是使用.bind方法并指定数据对象

$(.....).bind('click', {whateverproperty: whatevervalue}, function(event){ ... });

在这种情况下，您可以访问event.data.whateverproperty，从而检索值whatevervalue，从而可以做出更复杂的决策。

jQuery：绑定一个可以处理其子事件的事件监听器

4 个答案: