Geek Answers Handbook

Dynamic Content for Kids Click Click

I have a problem with jQuery at the moment when it comes to children that are 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 on 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 runs, however, I would like it to run on the children of this element. Any idea how I can do this using .on?

thanks

+5
source share
3 answers

The immediate child selector > equivalent to the .children() method. You need to change the selector to directly select children:

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

If this is dynamic content, you should do the following:

 //This if you want a specific element within the parents' children $(document).on('click', '.Select-menu-outer > .Select-menu-inner', function() { console.log('A .Select-menu-inner element was clicked'); }); //This if you want all the parents' children $(document).on('click', '.Select-menu-outer > *', function() { console.log('A child element was clicked'); });

See this snippet to see the benefits of specifying an inner class.

 $(document).on('click', '.select-menu-outer > .select-menu-item', function () { console.log('clicked %s', $(this).data('title')); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="select-menu-outer"> <li class="select-menu-item" data-title="first"> First Item </li> <li class="select-menu-item" data-title="second"> Second Item </li> <li class="select-menu-item" data-title="third"> Third Item </li> <li class="select-menu-item-no-click"> Can't Touch This </li> </ul>
0
source

From the documentation of the jQuery on method ( http://api.jquery.com/on/ ):

.on( events [, selector ] [, data ], handler )

Most browser events bubble or propagate from the deepest, innermost element (event target) in the document, where they occur right up to the body and element of the document.

If the selector is omitted or equal to zero, the event handler is called direct or direct. A handler is called every time an event occurs on selected elements, regardless of whether it occurs directly on an element or bubbles from a streaming (internal) element.

When a selector is provided, the event handler is called delegated. The handler is not called when the event occurs directly on the associated element, but only for descendants (internal elements) corresponding to the selector. jQuery creates event bubbles from the target to the element to which the handler is attached (i.e., the innermost one to the outer element), and starts the handler for any elements along this path corresponding to the selector.

From the jQuery click method ( http://api.jquery.com/click/ ):

This method is a shortcut for .on ("click", handler)

Therefore, reading these excerpts, we can conclude that when you attach a handler with the click method to child elements. .Select-menu-outer => The handler is not called when the event occurs directly on the associated element, but only for posterity.
So, if .Select-menu-outer children have no descendants, there will be no event handling.

0
source

More articles:


All Articles