jQuery 警报 onclick 元素的孩子？

jQuery alert onclick on element's child?

提问by lisovaccaro

I'm using this code to display an alert on a certain element:

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

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

I want to display an alert only when you click on 'li' elements inside '#resultsBox'.

我只想在您单击“#resultsBox”内的“li”元素时显示警报。

I'm trying to do it like this:

我正在尝试这样做：

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

This is the element's #resultsBox structure:

这是元素的 #resultsBox 结构：

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

How can this be done?

如何才能做到这一点？

回答by nnnnnn

When you bind an event handler with .click()it applies to any elements that matched your selector at that moment, not to elements later added dynamically.

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

Given your div is called "resultsBox", it seems reasonable to assume you are actually adding things to it dynamically to display the results of some other operation, in which case you need to use a delegated event handler:

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

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

This syntax of the .on()methodbinds a handler to "#resultsBox", but then when the click occurs jQuery checks whether it was on a child element that matches the "li" selector in the second parameter - if so it calls your function, otherwise not.

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

回答by Juri

Something like this should work

这样的事情应该工作

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

This should work now: http://jsbin.com/ocejar/2/edit

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

But anyway, also your example above using $("#resultsBox li")should work just fine. See here. However, using $("#resultsBox").find("li")should be a little fasterin terms of performances.

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

回答by Ankur

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

This will work for the dynamically added li elements.

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

回答by RobB

Your code as you have it should be working: http://jsfiddle.net/GxCCb/

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

Its important to note that the elements you're trying to attach the event handler to must exist when the code is evaluated. If it is added at a later time, then you must use on()(v1.7+) or delegate()(< 1.7), which is used for event delegation and allows the elements to be referenced if they are added later..

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

Using on():

使用on()：

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

Demo: http://jsfiddle.net/7Lz2Y/

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

Using delegate():

使用委托（）：

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

Demo: http://jsfiddle.net/XwYs5/

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

However, there are plenty of other methods for attaching the event handler for elements that exist prior:

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

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

Demo: http://jsfiddle.net/74Q7p/

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

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

Demo: http://jsfiddle.net/a28U5/

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

回答by Senthil Kumar

This should work.

这应该有效。

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

回答by Carlos

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

回答by Bishnu Paudel

UPDATE after question edit:

问题编辑后更新：

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


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

        console.log('a');

        });

Demo

演示