结合多份副本时的jQuery单击绑定工作不正常

Question

我似乎有一个问题，创建模板的副本，并妥善追平。点击（）方法给他们时。采取以下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);
 }

我这个看到的问题是，无论哪个项目用户点击，它总是跑警报（2），甚至当你点击的前几个项目。

我怎样才能得到这个工作？

修改我都取得了非常简单的例子，应显示该问题更加清晰。你点击什么项目不管，它总是显示了它的编号为2的警告框。

Answer 1

如果我错了纠正我，.valueOf()在JS返回一个Boolean对象.....

的原始值

这是不会发生的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。这也适用于被定义的事件。通过循环结束时，每click会知道同一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]的只是object的变化）：

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());
});