jQueryを使用してコールバック関数にイベントデータを渡す

Question

event.dataを使用してイベントが発生した要素の値を返す方法を理解できません。ここに私の例：

<a href="#" class="dw_add"> 
    <img src="http://something" /> 
</a> 

var callback = function(event){ console.log(event.data.src) } 

$('.dw_add') 
    .on('click', { src: $(this).find('img').attr('src') },callback); 

$これは現在文書を参照していますが、それはクリックされていません。うまくいけば私は何をしようとしているのか見ることができますが、javascriptの知識は限られています。私はPHPの考え方に近づいていると思います。

「img src」の値をコールバックに渡す方法はありますか？

Answer 1

あなたは機能の範囲内ではありませんので、この：$（これは）あなたがクリックした要素にはローカルスコープが存在しないので、それだと思う要素、無event.targetかevent.dataらないよう

$('.dw_add').on('click', { src: $(this).find('img').attr('src') },callback); 

が動作しません。 c！それは「この」のための要素と範囲への直接参照を持っているよう

は、しかし、これは動作する問題ではありません。

var callback = function(event){ console.log(event.data.src) } 
var elm = $('.dw_add'); 
elm.on('click', { src: elm.find('img').attr('src') },callback); 

、これは、関数のスコープ内にある（これを）$として動作します。それは関数スコープ内で、再び、であり、ターゲット要素への参照を有するよう

function callback(a){ console.log(a) } 

$('.dw_add').on('click', function() { 
    var a = $(this).find('img').attr('src'); 
    callback(a); 
});​ 

また、コールバック関数内で$（本）を使用して、動作します。

Answer 2

は、なぜこのような何かをしない：

jQueryのイベントハンドラで

var callback = function(event){ console.log($(this).find('img').attr('src')) } 

$('.dw_add') 
    .on('click', callback); 

Answer 3

、thisは、イベントを発射したDOM要素に設定されています。 <a>要素にイベントハンドラを添付するので、thisがリンクになります。あなたがimgのsrcを取得したい場合は、あなたがfind()やchildren()を使用することによってトリガaにimg要素を見つける必要があります

：

$('.dw_add').on('click', function(e) { 
    $(this).children('img').attr('src'); 
});