web-dev-qa-db-ja.com

jQuery trigger（ 'click'）が起動しないチェックボックスで.clickイベント

テーブルのその列のすべてのチェックボックスをチェックするヘッダーに[すべてチェック]チェックボックスがあるテーブルがあります。

<input class="check-all" type="checkbox" id="masterCheck" />

ただし、私のページの1つで、ページの読み込み時にすべてチェックボックスを自動的にオンにしたいのですが。

これを行うために、次のようなトリガー（「クリック」）関数を起動しようとしました。

$(document).ready(function () {
    if ($("#masterCheck").attr('checked')) {
    } else {
        $("#masterCheck").trigger('click');
    }
});

これはチェックボックスを正常にチェックしますが、クラスのチェックボックスに対してカスタムクリックイベントを発生させません。check-all（以下）：

$(function () {
    $('.check-all').click(function () {
        $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
    });
});

また、カスタムクリック関数がまだ読み込まれていないと考えて、Javascript setTimeoutを追加しようとしましたが、1、2、3秒待ってもカスタムクリック関数は起動しませんでした。

ページが読み込まれると、事前にチェックしたチェックボックスをオフにしてから再度チェックして、列のすべてのチェックボックスを完全にチェックできます。

カスタムクリックイベントを発生させるために、Document.readyのjQueryに特別なものを追加する必要がありますか？

***編集1：

わかりました。ページのdocument.ready関数のすぐ上にカスタムクリックイベントを追加して、ロードされていることを確認しようとしました（前のカスタムクリックイベントは、_Layoutで使用されるマスター.jsファイルにあるため）。これに加えて、新しいカスタムクリックイベントに対応するようにチェックボックスのクラスを変更したので、マスター.jsファイルのクラスと競合しません。

<input class="check-allx" type="checkbox" id="masterCheck" />


// Check all checkboxes when the one in a table head is checked:
    $(function () { 
        $('.check-allx').click(function () {
            $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
            alert(this);
        });
    });
// Check for unchecked masterCheck
    $(document).ready(function () {
        if ($("#masterCheck").attr('checked')) {
        } else {
            //$("#masterCheck").trigger('click');
            $("#masterCheck").click();
        }
    });

これにより、進行中のカスタムクリックイベント内にアラートがスローされるようですが、すべてのチェックボックスが適切にチェックされます。注：trigger（ 'click'）を.click（）に変更しました。どちらも、私の状況では同じことを行います。

javascriptjquerycheckboxtriggersclick
12
Lando

更新：これはjQuery1.8以下にのみ適用されます。これは jQuery 1.9で修正 。

問題は、jQueryでclick()を手動で呼び出すと、実際のクリックとは動作が異なることです。

実際にクリックすると、最初にチェックボックスの状態が変更され、次にクリックハンドラーが呼び出されます。

click()を呼び出すと、最初にクリックハンドラーが呼び出され、次にチェックボックスの状態が変更されます。

したがって、クリックハンドラでclickを呼び出すと、this.checkedはまだfalseになります。これを修正するには、次のようにchangeハンドラーではなくclickハンドラーにします。

$('.check-allx').change(function () {
    $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
});

jQueryで、チェックボックスで 'click（）'をプログラムでトリガーしてもすぐにチェックされないのはなぜですか？ 実際の手動クリックとjqueryトリガークリックの違いの詳細については、を参照してください。

31
Ben Lee

例：

$("#recurrence").trigger('click');

以下は、チェックボックスの状態が変化した後に実行されます。

$("#recurrence").click(function () {
    $(this).change(function(){
        if (this.checked) {
            $(".recurr-section").show();
        } else {
            $(".recurr-section").hide();
        }
    });        
});
2
Simbu

チェックされた属性をプログラムで設定しても、対応するクリックイベントはトリガーされないため、属性を設定するときに独自の.trigger('click')を追加する必要があります。

1
nnnnnn

了解しました。その機能が必要なのはその個々のページだけであることを考えると、簡単な方法で、カスタムクリックイベントをまとめて起動することを避けました。

今朝のコーヒーの後、それは私には少しはっきりしていました。回避策としてこのコードを追加しました。

$(document).ready(function () {
        $('table#OHTable input[type=checkbox]').attr('checked', 'checked');
    });

これは、テーブル内のすべてのチェックボックスをチェックするだけであり、事後にmasterCheckがクリックされたときに、適切なクリックイベントが引き続き発生します。

0
Lando