Geek Answers Handbook

Jquery for future elements not working?

I have a click function ...

$('.rx').children().on('click',function(){alert('got here');});

My divs (50 of these sets of divs per page) ...

 <div class="rx"><div id="'.$data_string.'" class="'.$button_image_class.'"><a href="#" ></a></div></div>

(Each of them is a css sprite image button that sends $ data_string to the id of the process_me function. I replaced the call to process_me with a warning ('got here') for this question. FYI $ button_image_class is a variable, since a certain image is loaded depending from member account)

Everything works beautifully until I use pagination to load more of the above divs (another 50, exactly the same $ data_string bar, which is different in all divs).

The links to the sprite buttons in the first 50 divs work the way they should - clicking on their “here” prompts. However, links in recently downloaded sets do not work.

I guessed at first because the DOM does not collect new elements, but .on ('click', function () ... should collect future elements. So now I think it's something in

 $('.rx').children().on('click',function(){alert('got here');});

What did I do wrong.

Is something sticking out there?

+6
source share
3 answers

No, .on will only bind to existing elements unless you are using a delegated event.

Option number 1

Bind to the click event for newly added elements in the callback ( after the elements are added to the DOM):

 $.ajax({ ... }).done(function(){ $('.rx').children().on('click', function() { alert('got here'); }); });

Option number 2

Use the delegated event that you bind to the container:

 $(document).on('click', '.rx > *', function() { alert('got here'); });

Note. You probably want to replace the asterisk in the selector with the actual element type or class that corresponds to the child elements. The use of an asterisk in selectors should be avoided when possible. Another improvement above is to use a parent that is closer to .rx instead of binding directly to document

+8
source

on () is not an alias of live (). It says: "Associate this future event with these children, which I point to the element that I indicate that exists now"

 $('.rx').on('click', '*', function(){alert('got here');});

but if it is an integer <div class="rx...> that is created dynamically, and not the elements inside it

 $(document).on('click', '.rx > *', function(){alert('got here');});
+3
source

You need to use a delegated event. In a nutshell, you need to specify a container element for jquery to "watch" for changes in the DOM, which means that the on () function has a slightly different syntax:

 $('body').children().on('click', '.rx',function(){alert('got here');});

This means that it will observe the body (in fact you should use a more specific element) and find any element with the class "rx". Now that the body has new elements dynamically inserted by javascript, they will also be warned.

See jQuery here for more details.

0
source

More articles:


All Articles