jquery - 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")应该会快一点。

Answer 3

您拥有的代码应该可以正常工作：http: //jsfiddle.net/GxCCb/

请务必注意，在评估代码时，您尝试将事件处理程序附加到的元素必须存在。如果稍后添加，则必须使用on()(v1.7+) 或delegate()(< 1.7)，用于事件委托，并允许稍后添加元素时引用。

使用on()：

$("#resultsBox").on('click', 'li', function (event) {
    alert(this.innerHTML);
    });

演示：http: //jsfiddle.net/7Lz2Y/

使用委托（）：

$("#resultsBox").delegate('li', 'click', function (event) {
    alert(this.innerHTML);
    });

演示：http: //jsfiddle.net/XwYs5/

但是，还有许多其他方法可以为先前存在的元素附加事件处理程序：

$("#resultsBox").find('li').click(function (event) {
    alert(this.innerHTML);
    });

演示：http: //jsfiddle.net/74Q7p/

$("#resultsBox ul > li").click(function (event) {
    alert(this.innerHTML);
    });

演示：http: //jsfiddle.net/a28U5/

Answer 4

这应该有效。

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

Answer 5

$("#resultsBox").click(function (event) {
    if(event.target.tagName.toLowerCase() == "li"){
         console.log('a');
    }
});

这将适用于动态添加的 li 元素。

Answer 6

问题编辑后更新：

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


$("#myList > li").click(function (event) {

        console.log('a');

        });

演示

Answer 7

$("#resultsBox").find('li').click(function (event) {
    alert($(this).text());
    });