Events javascript does not work after loading content into div with Ajax.

Question

I have a table on my site, whenever you click on the first checkbox, all others are selected and are also performed other actions that does not matter. Once the site opens, these data are loaded directly on the page with PHP.

http://i.imgur.com/GRIFbzN.png

Just above, I have a 'select' field with some options, whenever you change the option, you made an ajax request that returns other data, but with the same structure in HTML with the same checkbox and others like elements. This data is loaded into the table, but after loading the javascript events does not work anymore. How to solve this?

HTML: http://pastebin.com/jU5nZURs

Javascript: http://pastebin.com/XT1ty019

Thanks!

After selecting an option in the drop down box, the ajax will return the requested data into the table. After this what do you want to do? Cant understand your explanation, sorry. — Aljie, Mar 20 '14 at 03:29
possible duplicate of [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/questions/12829963/events-triggered-by-dynamically-generated-element-are-not-captured-by-event-hand) — Felix Kling, Mar 20 '14 at 03:32
and [Event binding on dynamically created elements?](http://stackoverflow.com/q/203198/218196) — Felix Kling, Mar 20 '14 at 03:32

score 0 · Accepted Answer · answered Mar 20 '14 at 03:30

0

Events are bound to existing DOM nodes.

When you replace / remove the nodes, the events bound to them go away, too.

You need to run this again after you load new content:

$(".checkData").on( "click", countChecked );

$("#checkAll").click(function(){
      $('input:checkbox').not(this).prop('checked', this.checked);
      countChecked();
});

p.s.
Put it in a function so you don't duplicate code.

answered Mar 20 '14 at 03:30

rockerest

9,847
3
33
67

The links in the comments above are better so you don't have to rebind on changes. – Jeremy J Starcher Mar 20 '14 at 05:10
@JeremyJStarcher True, but this is the absolute simplest explanation. Not rebinding on changes is an optimization, while my answer is the root problem. – rockerest Mar 20 '14 at 16:53

Events javascript does not work after loading content into div with Ajax.

1 Answers1