javascript - 加载其他内容后 jQuery 不工作

Question

我对 javascript 很陌生，但我正在我的网站上使用它。上周我发现了一个通过 jQuery 将附加内容加载到我的页面的脚本。一切都很好，直到我注意到我的其他脚本因此而停止工作。例如我有一个绑定(bind)复选框的脚本:

<script>
$(document).ready(
    function() {
        $('.class_of_checkbox').click(
            function() {
                if(this.checked == true) {
                    $(".class_of other_checkbox").attr('checked', this.checked);
                }
            }
        );
    }
);
</script>

这是行内代码。我读到它可能是由函数 ready() 引起的，它仅在加载 DOM 时触发，但我不确定如何解决这个问题。

Answer 1

使用 ajax 加载的动态元素需要委托(delegate)事件处理程序:

$(document).ready(function() {
    $(document).on('change', '.class_of_checkbox', function() {
        if (this.checked) 
          $(".class_of other_checkbox").prop('checked', this.checked);
    });
});

将第二个document替换为最接近的非动态parent，属性使用prop()，使用change事件捕获复选框状态的变化。