使用Ajax将内容加载到div后，事件javascript无法正常工作。

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!

Answer 1

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();
});

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