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() method的这种语法将处理程序绑定到“#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")的上述示例也应该可以正常工作。见here。但是，就性能而言，使用$("#resultsBox").find("li")应该是little faster。

Answer 3

您拥有的代码应该正常运行：http://jsfiddle.net/GxCCb/

重要的是要注意，在评估代码时，您尝试附加事件处理程序的元素必须存在。如果稍后添加，则必须使用on()（v1.7 +）或delegate()（＆lt; 1.7），用于事件委派，并允许引用元素它们稍后添加..

使用开启（）：

$("#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

问题编辑后更新：

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


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

        console.log('a');

        });

Demo

Answer 5

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

Answer 6

这应该有用。

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

Answer 7

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

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

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

7 个答案: