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）不是你认为的元素，因为没有点击元素的本地范围，没有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将成为链接。

如果您想获得src的{{1}}，则必须使用find()在触发img中找到img元素或children()：

使用jQuery将事件数据传递给回调函数

3 个答案: