将事件数据传递给jQuery的回调函数
问题描述:
我很难理解如何使用event.data来返回事件触发的任何元素的值。这里我的例子:将事件数据传递给jQuery的回调函数
<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'的值传递给回调函数?
答
你是不是里面的功能范围,因此这样的:
$('.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)将在函数作用域内再次使用,并且对目标元素有引用。
答
为什么不能做这样的事情:
var callback = function(event){ console.log($(this).find('img').attr('src')) }
$('.dw_add')
.on('click', callback);
答
在jQuery的事件处理程序,this
设置为触发事件的DOM元素。由于您将事件处理程序附加到<a>
元素,因此将会链接this
。
如果你想获得img
的src
,你必须使用find()
或children()
找到触发a
的img
元素:
$('.dw_add').on('click', function(e) {
$(this).children('img').attr('src');
});
很好的答案,谢谢你的解释! – 2012-02-28 10:40:44