キーを押したときにjQueryコードがバインド（「キーアップ変更」）のために2回トリガーされました

Question

すべての変更でjQueryがトリガーされる数値入力があります。 これを行うには、$('#id').bind('keyup change', ...);を実行します。これは、キーアップまたはマウスコントローラが変更されたときにトリガーされます。

これは、マウスクリック（トリガーchange）と数値の入力（トリガーkeyup）の検索を行います。カーソルキーの場合は、changeとkeyupの両方がトリガーされます。どのようにしてすべての状況で1回だけトリガーするのですか？

は、ここでの問題を示す例です：http://jsfiddle.net/jSjkE/

Answer 1

あなたはonchangeイベントについての間違った考え方を持っています。

それは要素の値が変更され、代わりに、それは2つの条件が満たされたときにのみ発火ませ火災ん：

• 要素ぼけが（フォーカスを失いました）。
• 要素は、フォーカスを取得したときとは異なる値を持ちます。

注：上記は入力タイプtextです。タイプcheckbox/radioの場合、checkedプロパティが変更されるとすぐに起動し、選択したオプションが変更されるとすぐにselectエレメントが発生します。

Chromeのinput type="number"の上矢印または下矢印を押すと、onchangeイベント（誤っている可能性があります）が発生します。 ではなく、に依存してください。多くの他の主要なブラウザには、数値入力の実装さえありません。この動作には従わないかもしれません。

代わりに、HTML5を使用している場合は、要素の値が更新されるたびに発生するoninput HTML5イベントを使用する必要があります。

$(function() { 
    var count = 0; 
    $('#num').on('input', function(e) { 
     console.log('update ' + (++count) + ' Value: ' + this.value);  
    }); 
});​ 

Fiddle

編集：古い（と非HTML5）ブラウザ用

、あなたはフォールバックとしてkeyupイベントを使用することがあります。

$('#num').on('input keyup', function(e) { 

非HTML5ブラウザでこれを行う最も弾力的な方法はga setIntervalは、要素の値が変更されたかどうかを常に確認しています。はテキストを選択してテキストボックスにドラッグすると起動しません。.on('input keyup mouseup'を試すことができますが、ブラウザの編集> 。

EDIT2：

あなたがsetIntervalを使用しない場合、あなたは巨大なイベントが.on/.bind内マップ置くことができ、値がの.data()に現在の値を格納することによって変更されているかどうかを確認要素：

var count = 0; 
$('#num').on('input keyup change', function(e) { 
    if (this.value == $(this).data('curr_val')) 
     return false; 
    $(this).data('curr_val', this.value); 

    console.log('update ' + (++count) + ' Value: ' + this.value); 
}); 

Fiddle

私はを追加しました10イベントをイベントマップに追加すると、oninputとonkeyupが失敗しても（ブラウザのメニューを使用してデータを貼り付けるHTML5以外のブラウザ）、onchangeイベントは、要素がフォーカスを失ったときにも起動します。

あなたはフォールバックのどちらを使用するかを選択することができますので、ここでは、グローバルを使用しないようにコメントしsetIntervalと.data()と、最終的な編集です：

$(function() { 
    var $num = $('#num'); 
    $num.data('curr_val', $num.val()); //sets initial value 

    var count = 0; 
    setInterval(function(){ 
     if ($num.data('curr_val') == $num.val()) //if it still has same value 
      return false; //returns false 
     $num.data('curr_val', $num.val()); //if val is !=, updates it and 
     //do your stuff 
     console.log('update ' + (++count) + ' Value: ' + $num.val()); 
    }, 100); //100 = interval in miliseconds 
}); 

Fiddle

Answer 2

$('input').unbind('keyup').bind('keyup',function(e){ ...