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() 绑定(bind)事件处理程序时，它适用于当时与您的选择器匹配的任何元素，而不是后来动态添加的元素。 p>

鉴于您的 div 名为“resultsBox”，似乎可以合理地假设您实际上正在向其动态添加内容以显示其他操作的结果，在这种情况下您需要使用委托(delegate)事件处理程序:

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

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