将事件数据传递给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'); 
});