On Click Children Dynamic Content

Question

I am having an issue with jQuery at the moment when it comes to the children of an element that has been dynamically pulled in with AJAX.

So I have the following statement:

$('.Select-menu-outer').children().click(function() {
  console.log("tiggered");
});

However this does not work for some reason, when I click the children of the .Select-menu-outer element nothing happens.

If I use the following statement:

$(document).on("click", '.Select-menu-outer', function() {
  console.log("tiggered");
});

It triggers however I would like it to trigger on the children of that element. Any idea how I can do this using .on?

Thanks

Answer 1

Immediate child selector > is equivalent to .children() method. You need to modify selector to target immediate child elements:

$(document).on("click", '.Select-menu-outer > *', function() {
  console.log("tiggered");
});