javascript - jQuery on/delegate 正确的语法

Question

由于 jQuery API 目前已关闭，是否有人可以帮助我解决以下问题？我正在将无序列表加载到网页中，并且需要能够将悬停和单击事件附加到列表项。

<ul>
  <li class="option">Item 1</li>
  <li class="option">Item 1</li>
  <li class="option">Item 1</li>
</ul>

到目前为止，我已经尝试了以下 jQuery 代码的一些变体，使用 .on 版本 1.7+

$("ul").on("click", "li .option", function(){
alert($(this).text());
});

谁能指出我正确的方向？我知道 .live 已被贬值并且 .delegate 已被取代，所以真的只是在寻找一个允许我使用 .on 的解决方案。

一如既往的感谢！

score 3 · Accepted Answer

不是li .option，因为它在li类中找到元素option，但是你有这个类li，所以它会是li.optionor .option。

所以对于.on()，它看起来像：

$("ul").on("click", "li.option", function(){
   alert($(this).text());
});

但是对于.delegate()，它看起来像：

$("ul").delegate("li.option", "click", function(){
   alert($(this).text());
});

您正在尝试使用容器引用绑定click到，它也附加到 DOM 更改。所以你可以去 for ，它已经存在于 DOM 中，你可以在其中附加整个列表。li.optionul#content

所以委托事件将如下所示：

$("#content").delegate("ul > li.option", "click", function(){
   alert($(this).text());
});

1 回答 1