Question

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’.

I’m trying to do it like this:

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

This is the element’s #resultsBox structure:

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

How can this be done?

Answer 1

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.

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:

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

This syntax of the .on() method binds 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.