將事件數據傳遞給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); 

不會爲$工作（這）不是元素，您認爲這是因爲對於點擊的元素，沒有event.target或event.data等沒有本地範圍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); 
});​ 

此外，在回調函數中使用$（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'); 
});