javascript - 加载其他内容后 jQuery 无法正常工作

Question

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

<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 加载的动态元素需要委托的事件处理程序：

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

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

Answer 2

当 ajax 调用完成时，使用 $.ajaxComplete 重新绑定您的操作

http://api.jquery.com/ajaxComplete/

$(document).ajaxComplete(function() {
    $('.class_of_checkbox').click(
        function() {
            if(this.checked == true) {
                $(".class_of other_checkbox").attr('checked', this.checked);
            }
        }
    );
});