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

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

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);
            }
        }
    );
});

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

2 个答案: