使用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

你不在函數范圍內，所以這個：

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

將無法工作，因為$（this）不是您認為的元素，因為沒有本地范圍的clicked元素，沒有event.target或event.data等！

然而，這將起作用，因為它直接引用元素和范圍“this”不是問題：

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

這將起作用$（this）在函數范圍內：

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

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

此外，在回調函數中使用$（this）將再次在函數范圍內工作，並且具有對目標元素的引用。

Answer 2

為什么不這樣做：

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

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

Answer 3

在jQuery事件處理程序中， this被設置為觸發事件的DOM元素。 由於您將事件處理程序附加到<a>元素， this將是鏈接。

如果你想獲得img的src ，你必須使用find()或children()在觸發a找到img元素：

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