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

ps
将其放在函数中，这样就不会重复代码。