1

私はjavascriptを初めて使用しますが、自分のWebサイトで使用しています。先週、jQuery 経由でページに追加のコンテンツをロードするスクリプトを見つけました。それが原因で他のスクリプトが機能しなくなったことに気付くまで、すべてが順調でした。たとえば、チェックボックスをバインドするスクリプトがあります。

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

インラインコードです。DOMがロードされたときにのみ起動する関数ready（）が原因である可能性があることを読みましたが、この問題を解決する方法がわかりません。

4

2 に答える 2

2

ajax でロードされた動的要素には、委譲されたイベント ハンドラーが必要です。

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

document2 番目を最も近い非動的な親に置き換え、prop()プロパティに使用し、changeイベントを使用してチェックボックスの状態の変化をキャプチャします。

于 2013-04-22T20:20:56.787 に答える
1

$.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);
            }
        }
    );
});
于 2013-04-22T20:20:24.497 に答える