将参数传递给 jQuery .click WHILST 保留事件参数答案

【问题标题】：Passing arguments to jQuery .click WHILST keeping event parameter将参数传递给 jQuery .click WHILST 保留事件参数
【发布时间】：2012-08-13 06:20:10
【问题描述】：

我需要将click 事件绑定到DOM 中的一个元素，同时能够动态传递参数，包括事件对象。我当前的脚本使用以下内容：

var counter = 1;
$(".dynamo_user_info .dynamo_awards").each(function(){
    $(this).find("~ div a").each(function(){
        var id = $(this).attr("rel").split("aid-")[1];
        $(this).attr("id","dynamo_award-"+counter+"-"+id).bind('click',{c:counter,i:id},function(e){
            e.returnValue = e.preventDefault && e.preventDefault() ? false : false;
            dynamo.awards.tooltip.ini(c,i);
        });
    });
    counter++;
});

现在，如您所见，counter 在每次迭代中都会增加，而id 不保持静态值。每次迭代后，最终值为：counter = 4、id = 2。现在，每当单击这些元素之一时，它会在适当的情况下运行preventDefaults，然后运行dynamo.awards.tooltip.ini(c,i);。

但是，这并没有按预期工作。而不是运行：

dynamo.awards.tooltip.ini(1,1); dynamo.awards.tooltip.ini(2,6);

等（例如），而是运行：

dynamo.awards.tooltip.ini(4,2); dynamo.awards.tooltip.ini(4,2);

即它使用counter 和id 的最后存储值。我的猜测是它这样做是因为bind 的工作原理，传递参数 when 元素被点击，而不是之前。我不确定如何解决这个问题，除非我能以某种方式欺骗函数的范围？

【问题讨论】：

虽然！ 啊，英语。 :)
你需要了解closure scope。（另见Bonsai! 和无聊的老MDN）
顺便说一句，这行似乎是多余的：e.returnValue = e.preventDefault && e.preventDefault() ? false : false;
@KeirSimmons 你可能没用过 jQuery 事件，jQuery 从 6 年前的 1.0 开始就已经规范化了 .preventDefault
将var c = counter, i = id; 添加到$.find().each() 范围，位于$.click() 范围之上。这将保持它在范围内的价值，您不必 bugger (!) 与其他 cruft (!)。只有一件事，我会使用更具表现力的语法，比如var self_counter = counter, self_id = id;。

标签： javascript jquery scope click bind

【解决方案1】：

可以通过 event.data 对象访问参数，例如

dynamo.awards.tooltip.ini(e.data.c, e.data.i);

http://api.jquery.com/bind/#passing-event-data

【讨论】：