重複 - jquery 複数 処理




jQueryの複数のイベントが同じ関数をトリガする (7)

keypress keyupkeypressblur 、およびchangeイベントを1つの行で同じ関数を呼び出す方法はありますか、それとも別々に行う必要がありますか?

私が持っている問題は、dbルックアップを使っていくつかのデータを検証する必要があり、型指定されているか、ボックスに貼り付けられているかに関わらず、いずれの場合でも検証が間違っていないことを確認したいということです。


Tatuの答えは私が直感的にやっている方法ですが、これは.on()メソッドによって行われていますが、イベントのネスト/バインドのこの方法でInternet Explorerにいくつかの問題が発生しました。

私はこれが問題となっているjQueryのバージョンを正確に特定することはできませんでした。 しかし、私は次のバージョンで問題が発生することがあります。

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • モバイル1.3.0b1
  • モバイル1.4.2
  • モバイル1.2.0

私の回避策は、最初に関数を定義し、

function myFunction() {
    ...
}

イベントを個別に処理する

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

これは最善の解決策ではありませんが、それは私にとってはうまくいきます。私はこの問題につきまとうかもしれない他の人を助けるためにそこに置くことを考えました


jQuery 1.7以降では、 .on()メソッドがイベントハンドラをドキュメントに添付するのに適したメソッドです。 以前のバージョンでは、 .bind()メソッドはイベントハンドラを要素に直接取り付けるために使用されます。

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

.on()を使用すると、関数を複数のイベントにバインドできます。

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

あるいは、関数をパラメータとして通常のイベント関数に渡すだけです:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

keypress keyupkeypressblur 、およびchangeイベントを同じ方法で1行に呼び出す方法はありますか?」

.on().on( events [, selector ] [, data ], handler )構造体を受け入れることができるので、このメソッドに複数のイベントを渡すことができます。 あなたの場合、次のようになります:

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

ここに実例があります:

$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">


以下のように再利用したい機能を定義することができます。

var foo = function() {...}

そして、後であなたのオブジェクト上で望む多くのイベントリスナーに、on( 'event')を使ってその関数をトリガするように設定することができます。

$('#selector').on('keyup keypress blur change paste cut', foo);

同じイベントハンドラを複数のイベントにアタッチすると、一度に複数のイベントが発生することがよくあります(たとえば、編集後にユーザがタブを押す、キーダウン、変更、ブラーがすべて消えるなど)。

あなたが実際に欲しいものは次のようなものです:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});







javascript-events