JQuery clic fijaciones no funcionan correctamente cuando se unen múltiples copias

Question

Parece que tengo un problema al crear copias de una plantilla y atar el método .click () a ellos adecuadamente. Tome el siguiente JavaScript, por ejemplo:

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

El problema que veo con esto es que no importa qué elemento el usuario hace clic en, se corre siempre alerta (2), incluso cuando se hace clic en los primeros artículos.

¿Cómo puedo conseguir que esto funcione?

Editar: He hecho un ejemplo muy simple que debe mostrar el problema mucho más clara. No importa lo que el tema se hace clic en, que siempre muestra un cuadro de alerta con el número 2 en él.

Answer 1

corrígeme si me equivoco, .valueOf() en JS devuelve el valor primitivo de un objeto Boolean .....

esto no ocurriría ShowObject(5,'T'); ... ShowObject(objectVal.valueOf(), 'T');

¿por qué no usar directamente objects[x].Value? ShowObject(objects[x].Value, 'T');

WOOOOOSSSHHHH!

después de buscar profundamente ... he encontrado una solución ...

porque es un cierre, será en realidad no funciona de esa manera ...
he aquí una solución,

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

para mejor explicación, lea este ... en la parte media de la página donde que dice Al pasar los datos del evento turismo Els href="http://jsbin.com/ivofu3" rel="nofollow noreferrer"> una demostración rápida de código anterior

Answer 2

Creo que su problema se debe a una mala interpretación de los alcances en JavaScript. (Mis disculpas si me equivoco).

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

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

En JavaScript, sólo funciona crear un nuevo ámbito (comúnmente referido como un cierre ).

Por lo tanto, todas las rondas del bucle for sabrá el mismo foo, ya que su ámbito de aplicación es el function, no el for. Esto también se aplica a los eventos que se han definido. Al final del bucle, cada click sabrá la misma foo y saber que es el último valor que se le asignó.

Para evitar esto, o bien crear un cierre interior con una función de inmediato a ejecutar, anónimo:

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

O, utilizando una función basada en la devolución de llamada, como jQuery.each :

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

---

Para su tema, me gustaría ir con este último (tenga en cuenta los cambios de objects[x] a poco 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());
});