使用Ajax将内容加载到div后，事件javascript无效。

Question

我的网站上有一个表格，每当您点击第一个复选框时，所有其他选项都被选中，并且还执行其他无关紧要的操作。 站点打开后，这些数据将直接使用PHP加载到页面上。

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

就在上面，我有一个带有一些选项的'select'字段，每当你改变选项时，你做了一个返回其他数据的ajax请求，但在HTML中使用相同的复选框和其他类似的元素具有相同的结构。 此数据已加载到表中，但加载后，javascript事件不再起作用。怎么解决这个问题？

HTML：http://pastebin.com/jU5nZURs

Javascript：http://pastebin.com/XT1ty019

谢谢！

Answer 1

事件绑定到现有DOM节点。

当您替换/删除节点时，绑定到它们的事件也会消失。

加载新内容后，您需要再次运行此功能：

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

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

P.S。
将它放在一个函数中，这样就不会重复代码。