web-dev-qa-db-ja.com

jQuery .on（）メソッド-イベントハンドラー関数に引数を渡す

動作しない次のスクリプトがあります

<script type="text/javascript" >

   function ADS(e){ alert(e); }

   $(document).ready(function(){
          $(document).on("dblclick","#an_tnam tr", ADS('hello'));
          $(document).on("dblclick","#kv_tnam tr", ADS('world'));
          // ....  
 });

</script>

イベントハンドラー関数ADSに引数を渡すにはどうすればよいですか？

jqueryevent-handling
37
Paramore

.on()関数は、関数参照が渡されることを期待しています。あなたがしていることは、関数を呼び出して戻り値を渡すことです。パラメータを渡す必要がある場合は、匿名関数で呼び出しをラップする必要があります。

$(document).on('dblclick', '#an_tnam tr', function(event) {
    ADS('hello');
});

jQueryは常に、正規化されたイベントオブジェクトを、実行する関数の最初の引数として渡します。

51
Anthony Grist

追加のデータをイベント処理関数に渡すことができ、ハンドラー内で_event.data_を使用してアクセスできます。

_$(document).on('dblclick', '#an_tnam tr', { extra : 'random string' }, function(event)
{
    var data = event.data;

    // Prints 'random string' to the console
    console.log(data.extra);
}
_

.trigger()メソッドを使用して、外部ソースからイベントをトリガーするときに、任意のイベントに追加のデータを送信することもできます

_$('#an_tnam tr').trigger('click', [{ extra : 'random string' }]);
_

トリガーメソッドにデータを渡すこととの違いは、ハンドラーが渡された配列の長さの追加の引数を取ることを期待していることです。上記では、ハンドラーに渡されたオブジェクトを含む追加の引数が1つあると予想されます。

_$('#an_tnam tr').on('click', function(event, obj)
{
   // Prints 'random string' to the console
   console.log(obj.extra);
}
_
104
David Barker

実際には、JS bind（）を使用して、余分な混乱や匿名関数を使用せずに、これを実現する非常に簡潔な方法があります。

$(document).on('dblclick', ADS.bind(null, 'hello'));

最初のパラメーターは、「this」にコールバック関数内に含める値です。

Mozilla Developer NetworkのMOre情報： https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

5
Ignacio Segura

Anthony Grist が指摘したように、.on()メソッドはその部分で関数参照を期待しています。何も返さない関数（null）を評価しています。

ただし、JavaScriptの楽しい機能の1つは、すべてが関数を含むオブジェクトであることです。少し変更するだけで、ADS()を変更して、代わりに匿名関数オブジェクトを返すことができます。

function ADS(e){ 
    return function(){ alert(e); };
}

http://jsfiddle.net/cSbWb/

5
Blazemonger
function ADS(e){ alert(e); }

$(document).ready(function(){
          $(document).on("dblclick","#an_tnam tr", function (e) { ADS('hello') });

 });

トリックを行います。

3
akluth
function ADS(e) {
    return function() {
        alert(e);
    };
}

あなたがやっているときのように

$(document).on("dblclick","#an_tnam tr", ADS('hello'));

、イベントハンドラーとして割り当てられるのは返された関数です（また、ハンドラーが呼び出されたときではなく、ハンドラーを割り当てるときに文字列引数が渡されます）。

3
user1321425