绑定多个副本时，Jquery 单击绑定无法正常工作

Question

在创建模板副本并将 .click() 方法正确绑定到它们时，我似乎遇到了问题。以下面的 javascript 为例：

function TestMethod() {
    var test = Array();
    test[0] = 0;
    test[1] = 1;
    test[2] = 2;

    // Insert link into the page
    $("#test_div").html("<a href=\"#\"></a><br>");
    var list;
    for (x = 0; x < test.length; x++) {
        var temp = $("#test_div").clone();
        temp.find('a').html("Item #" + test[x]);
        temp.click(function () { alert(x); });

        if (list == undefined)
            list = temp;
        else
            list = list.append(temp.contents());
    }
    $("#test_div2").append(list);
 }

我看到的问题是，无论用户单击哪个项目，它总是运行alert(2)，即使您单击前几个项目也是如此。

我怎样才能让它发挥作用？

编辑：我做了一个非常简单的例子，应该更清楚地显示问题。无论您点击哪个项目，它总是会显示一个带有数字 2 的警告框。

Answer 1

如果我错了，请纠正我，JS 中的 .valueOf() 返回布尔对象的原始值......

这不会发生 ShowObject(5,'T');... ShowObject(objectVal.valueOf(), 'T');

为什么不直接使用objects[x].Value？ ShowObject(objects[x].Value, 'T');

WOOOOOSSSHHHH!

经过深入搜索...我找到了一个解决方案...

因为它是一个闭包，所以它赢了真的不是这样工作的...
这是一个解决方案，

temp.find('a').bind('click', {testVal: x},function (e) { 
   alert(e.data.testVal);
   return false;
});

为了获得最佳解释，请阅读此内容...在页面的中间部分其中显示传递事件数据
上述内容的快速演示代码

Answer 2

我认为你的问题源于对 JavaScript 范围的误解。 （如果我错了，我很抱歉。）

function () {
    for (...) {
        var foo = ...;

        $('<div>').click(function () { alert(foo); }).appendTo(...);
    }
}

在 JavaScript 中，只有函数才能创建新作用域（通常称为闭包）。

因此，每轮 for 循环都会知道相同的 foo，因为它的作用域是 function，而不是 for.这也适用于正在定义的事件。在循环结束时，每次点击都会知道相同的foo，并知道它是最后分配的值。

要解决此问题，请使用立即执行的匿名函数创建内部闭包：

function () {
    for (...) {
        (function (foo) {
            $('<div>').click(function () { alert(foo); }).appendTo(...);
        })(...);
    }
}

或者使用基于回调的函数，例如 jQuery.each：

function () {
    $.each(..., function (i, foo) {
        $('<div>').click(function () { alert(foo); }).appendTo(...);
    });
}

---

对于您的问题，我会选择后者（请注意 objects[x] 的更改只是对象）：

var list;
jQuery.each(data.objects, function (x, object) {

    // Clone the object list item template
    var item = $("#object_item_list_template").clone();

    // Setup the click action and inner text for the link tag in the template
    var objectVal = object.Value;
    item.find('a').click(function () { ShowObject(objectVal.valueOf(), 'T'); }).html(object.Text);

    // add the html to the list
    if (list == undefined)
        list = item;
    else
        list.append(item.contents());
});