关于元素的孩子的jQuery警告onclick？

Question

我正在使用此代码在某个元素上显示警报:

$("#resultsBox").click(function (event) {
    console.log('a');
    });

我想只在你点击'#resultsBox'里面的'li'元素时才显示警告.

我试着这样做:

$("#resultsBox li").click(function (event) {
    console.log('a');
    });

这是元素的#resultsBox结构:

<div id="resultsBox">
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>

如何才能做到这一点？

Answer 1

当您使用绑定的事件处理程序.click()也适用于符合您选择的任何元素的那一刻,而不是后来添加动态元素.

鉴于你的div被称为"resultsBox",假设你实际上是动态添加东西以显示其他操作的结果似乎是合理的,在这种情况下你需要使用委托的事件处理程序:

$("#resultsBox").on("click", "li", function (event) {
    console.log('a');
});

该.on()方法的语法将处理程序绑定到"#resultsBox",但是当发生单击时,jQuery检查它是否在与第二个参数中的"li"选择器匹配的子元素上 - 如果是,则调用您的函数,否则不.

Answer 2

这样的事情应该工作

$("#resultsBox").find("li").click(function(){
  alert("You clicked on li " + $(this).text());
});

现在应该可以使用了：http : //jsbin.com/ocejar/2/edit

但无论如何，您上面使用的示例也$("#resultsBox li")应该可以正常工作。见这里。但是，就性能而言，使用$("#resultsBox").find("li")应该快一点。