jQuery dynamic ajax data with click event

Question

Hey all i am trying to figure out why, when i populate my page with data, when i try to do a .click event on a checkbox that it never finds it... but when i have the code on the page without being gathered from ajax it works just fine?

jQuery(document).ready(function () {
   jQuery('#selectAll').click(function () {
       console.log('hit');
   });
});

<th scope="col" id="cb" class="manage-column column-cb check-column">
    <input id="selectAll" type="checkbox">
</th>

The above code works just fine if the checkbox code is on the page to start with but does not work if the same code is populated via ajax.

What would i be doing incorrectly?

bipen · Accepted Answer · 2013-04-30 17:15:17Z

4

use on delegated event

jQuery(document).ready(function () {
  jQuery(document).on('click','#selectAll',function () {
     console.log('hit');
  });
});

you need to delegate the event if the element is generated dynamically... however, it is recommended to delegate it to the closest staic parent container than the document itself for better performance.. link to read more about on delegated events

answered Apr 30, 2013 at 17:15

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery dynamic ajax data with click event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related