2

私はjQuery 1.6.1を使用していますが、クリックイベントを呼び出しながらプログラムでチェックしたいチェックボックスがあります。通常、私はこの呼び出しを行います：

$('#my_checkbox').click();

Web ページが最初にロードされるとき、チェックボックスはチェックされていません。上記の呼び出しを行うと、期待どおりにクリック イベントが発生しますが、クリック イベント内でthis.checkedはまだ false が返されます。クリックイベントが完了すると、チェックボックスがチェックされます。チェックボックスの状態が変化する前に、クリックイベント（プログラムでトリガーされた場合）が実行されるようです。チェックボックスを実際にクリックすると、チェックボックスthis.checkedの新しい状態が適切に反映されます。つまり、イベントが発生する前に状態が変更されます。

プログラムでクリック イベントを呼び出すと、状態が変化する前にイベントが発生するのはなぜですか? また、それを回避するにはどうすればよいですか?

4

1 に答える 1

3

これは興味深い問題です (ここで再現しました)。もちろん、changeハンドラーではなくclickハンドラーを使用したくなるかもしれませんが ( example )、問題は、状態を切り替えるために使用するときに IEでまったくchange起動しないことです。これは、そうしない正当な理由かもしれません。click

デフォルト アクションの実行に依存しない独自のメカニズムを定義できると思いますclick— 小さな小さなプラグイン、または呼び出して jQuery オブジェクトに渡す単なる関数です。以下は小さなプラグイン バージョンです。

(function($) {
  $.fn.flip = function() {
    this.prop("checked", !this.prop("checked"));
    this.triggerHandler("click");
    this.triggerHandler("change");
  };
})(jQuery);

使用法：

$('my_checkbox').flip();

実例| ソース

複数のチェックボックスを含むjQueryオブジェクトに適用された場合、そのオフザカフバージョンは、それらすべてを同じ値に強制することに注意してください。それらを独立させたい場合は、ループできます。

(function($) {
  $.fn.flip = function() {
    this.each(function() {
        this.checked = !this.checked;
    });
    this.triggerHandler("click");
    this.triggerHandler("change");
  };
})(jQuery);

実例| ソース

triggerHandlerではなくを使用することでtrigger、デフォルト アクションの発生を回避します。

別の方法は、チェックボックスのすべてのclickハンドラーでタイムアウトを使用することです。

$("my_checkbox").click(function() {
    var $this = $(this);
    setTimeout(function() {
        // Actually do something with $this
    }, 0);
});

...これはメンテナンスの悪夢のようです。

于 2012-07-12T14:29:01.727 に答える