Jquery onclick warning on child?

Question

I use this code to display a warning on a specific item:

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

I want to display a warning only when you click on the 'li' elements inside the #resultsBox '.

I am trying to do it like this:

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

This is the #resultsBox element:

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

How can I do that?

Answer 1

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

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

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

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

Answer 2

Something like this should work

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

Now this should work: http://jsbin.com/ocejar/2/edit

But anyway, your example above using $("#resultsBox li") should work fine. See here . However, using $("#resultsBox").find("li") should be slightly faster in terms of performance.

Answer 3

Your code you have should work: http://jsfiddle.net/GxCCb/

It is important to note that the elements you are trying to attach an event handler must exist when the code is evaluated. If it is added later, you should use on() (v1.7 +) or delegate() (<1.7), which is used to delegate events and allows you to refer to elements if they are added later.

Using on () :

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

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

Using delegate () :

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

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

However, there are many other methods for binding an event handler for previously existing elements:

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

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

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

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

Answer 4

UPDATE after editing the question:

 <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

That should work.

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

Answer 7

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

This will work for dynamically added li elements.