JQuery cliquez sur les liaisons ne fonctionnent pas correctement lors de la liaison des copies multiples

Question

Il me semble avoir un problème lors de la création de copies d'un modèle et attacher la méthode .cliquez () pour les correctement. Prenez le javascript suivant par exemple:

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

Le problème que je vois avec ceci est que peu importe quel élément les clics de l'utilisateur sur, il fonctionne toujours en alerte (2), même lorsque vous cliquez sur les premiers éléments.

Comment puis-je obtenir ce travail?

Modifier: J'ai fait un exemple très simple qui devrait montrer le problème beaucoup plus clair. Peu importe quel élément vous cliquez sur, il affiche toujours une boîte d'alerte avec le numéro 2 sur elle.

Answer 1

moi si je me trompe, dans .valueOf() JS renvoie la valeur primitive d'un objet Boolean .....

cela ne se produira pas ShowObject(5,'T'); ... ShowObject(objectVal.valueOf(), 'T');

pourquoi ne pas utiliser directement objects[x].Value? ShowObject(objects[x].Value, 'T');

WOOOOOSSSHHHH!

après une recherche en profondeur ... J'ai trouvé une solution ...

parce qu'il est une fermeture, il ne fonctionnera pas vraiment de cette façon ...
voici une solution,

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

pour une meilleure explication, s'il vous plaît lire cette ... dans la partie centrale de la page où il est dit Transfert de données de l'événement une démonstration rapide du code ci-dessus

Answer 2

Je pense que votre question se pose d'une mauvaise compréhension des champs d'application en JavaScript. (Mes excuses si je me trompe).

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

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

En JavaScript, ne fonctionne que créer un nouveau champ (communément appelée fermeture ).

Alors, chaque tour de la boucle de for connaîtra le même foo, puisque son champ d'application est le function, pas le for. Cela vaut également pour les événements en cours de définition. À la fin de boucle, chaque click connaîtra le même foo et de savoir qu'il est la dernière valeur, il a été attribué.

Pour contourner ce problème, créez une fermeture intérieure avec un immédiatement-exécution, fonction anonyme:

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

Ou, en utilisant une fonction basée callback, comme jQuery.each :

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

---

Pour votre question, je partirais avec ce dernier (noter les changements de objects[x] à juste 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());
});