web-dev-qa-db-ja.com

jQuery .change（）イベントは、新しいバージョンの.click（）でトリガーされますか？

私は現在、jQuery 1.6.1（以前は1.4.4を使用していた）を使用するようにアプリケーションをアップグレードしていますが、.click()イベントが自動的に.change()イベントもトリガーするようになりました。

ここに簡単な例を作成しました： http://jsfiddle.net/wDKPN/

1.4.4を含めると、.change()イベントがトリガーされたときに.click()関数がnotを起動します。しかし、1.6に切り替えると、.change()がトリガーされたときに.click()イベントが発生します。

2つの質問：

  1. これはバグですか？プログラムでトリガーする.click()はすべきではないようです他のイベントも起動します（たとえば、ユーザーのクリックを「模倣」するために.blur()および.focus()を自動的に起動することは間違っているように思われます）。

  2. change()イベントをバインドし、次にトリガーをバインドする適切な方法は何ですかその要素のclick()およびchange()イベント？.click()を呼び出すだけで、 .change()も起動するという事実？

    _$('#myelement').change(function() {
     // do some stuff
});

$('#myelement').click(); // both click and change will fire, yay!
_

私の古いコードでは、このパターンを使用して、ajax呼び出しの後にいくつかのチェックボックス（およびそのチェックされた状態と値）を初期化しています。

_    $('#myelement').change(function() {
         // do some stuff including ajax work
    }).click().change();
_

しかし、1.6.1では、ロジックが2回起動します（.click()に対して1回、.change()に対して1回）。 .change()トリガーを削除するだけで、jQueryが今後のバージョンでもこのように動作することを期待できますか？

javascriptjqueryjquery-click-event
24
Jared Cobb

これを行う最良の方法は次のとおりです。

$('#myelement').bind('initCheckboxes change', function() {
     // do some stuff including ajax work
}).trigger('initCheckboxes');

初期化を行うには、カスタムイベントにバインドするだけで、ページが初めて読み込まれたときにトリガーされます。これは、どのバージョンでも誰もあなたから奪うことはありません。

changeイベントは、長い間使用されてきたため、すべてのバージョンで引き続き存在し、その方法でうまく機能すると思います。

結局、これはハッピーエンドストーリーです。カスタムイベントinitCheckboxesはページの読み込み時に1回だけ発生し、changeイベントは常にリッスンして状態の変化時に発生します。

3
Shef

これはjQuery 1.4.4のバグだと思います。 jQueryイベントハンドラーを削除し、標準のaddEventListenerを使用すると、jquery 1.6.1と同じ結果が生成されます。

http://jsfiddle.net/jruddell/wDKPN/26/

window.count = 0;

document.getElementById('mycheckbox').addEventListener('change', function() {
    window.count++;
    jQuery('#output').append('I fired: ' + window.count + ' times<br />');
});

document.getElementById('mycheckbox').click();

また、triggerHandlerを使用して、jQueryイベントハンドラーを具体的に呼び出します。イベントモデルで呼び出すハンドラを決定する場合は、click、changeなどを使用します。

2
Josiah Ruddell

チェックボックスのクリックイベントを忘れます。 changeイベントはすべてを処理します。

$('#myelement').change(function() {
    // do some stuff
});
$('#myelement').trigger('change');

自分で確認してください： http://jsfiddle.net/zupa/UcwdT/ （このデモはjQuery 1.8に設定されていますが、1.6でも動作します。）

2
zupa

クリックハンドラー内にchange（）を配置し、クリックをトリガーすることで、jQuery 1.4.4と1.6の両方の実装で機能させることができると思います。

$('.myelement').click(function(){
 $('.myelement').change();   
 alert($(this).val());
});
$('.myelement').trigger('click');

簡単な例を見てみましょう there 。

1
kwicher