0

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.

https://i.stack.imgur.com/ZLLxv.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

1 Answers1

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.

rockerest
  • 10,412
  • 3
  • 37
  • 67