Définition de données dynamiques sur les éléments JQuery dynamiques

Je suis novice en JQuery et je n'ai pas une grande expérience en Javascript, ce qui pourrait contribuer à mes problèmes ... J'essaie de générer dynamiquement une liste de éléments et lier les événements de clic à chacun des éléments générés dynamiquement. Je peux créer la liste et lier avec succès les événements de clic, mais ensuite je suis tombé sur une pierre d'achoppement.Définition de données dynamiques sur les éléments JQuery dynamiques

Je dois pouvoir faire en sorte que chaque événement click accède à des données spécifiques associées à l'élément sur lequel on a cliqué. Mon initiale était de simplement inclure les données dans la fonction dynamique que je crée lorsque je lie l'événement click. Le code ci-dessous essaye de faire ceci, mais chaque fois que je clique sur un élément dans la liste, j'obtiens seulement la valeur finale de ma variable de compteur (2).

Il est clair que je ne comprends pas bien la façon dont ma fonction de clic est créée. J'ai lu tout un tas d'articles ici à SO que pourrait être être lié, mais je n'ai pas trouvé la façon élégante/correcte d'accomplir cela pour le moment.

Ma page de test:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 

    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript">google.load("jquery", "1.3.2");</script> 

    <script type="text/javascript"> 
function generateList() { 
    var listElement = $('#unsortedList'); 
    var dataArr = new Array(); 
    dataArr["name1"] = "value1"; 
    dataArr["name2"] = "value2"; 

    // Clear any existing HTML 
    listElement.html(''); 

    var i = 0; 
    for(item in dataArr) { 
    listElement.append('<li><div id="item' + i + '">Item ' + i + '</div></li>'); 

    $('#item' + i).click(function() { 
     alert(i); 
     $('#item' + i).html("You clicked item " + i); 
    }); 

    i++; 
    } 
} 

$(document).ready(function(e){ 
    generateList(); 
}); 

    </script> 
    </head> 
    <body> 
    <h1>Test List</h1> 
    <ul id="unsortedList"> 
    </ul> 
    </body> 
</html>

[EDIT] - Mon but ultime est d'utiliser la valeur variable compteur à l'index dans un tableau externe de valeurs. Je sais que cela semble un peu déconnecté dans l'exemple. Lorsque vous cliquez sur l'élément, je veux extraire un index dans un tableau, exécuter une fonction qui générera une valeur que je vais utiliser pour remplir un autre élément dans le même élément de liste dynamique.

Source

2010-07-09 Quintus

Cela fonctionne:

$('#item' + i).click((function(x) { 
      return function(){ 
       $('#item' + x).html("You clicked item " + x); 
      }; 
     })(i));

testé ici: http://jsfiddle.net/uLGxb/

Source

2010-07-09 19:51:19

Ce dont vous avez besoin est la fermeture ici. Faites-moi savoir si cela fonctionne car je n'ai pas eu l'occasion de le tester. –

Je vois l'idée ici, mais je l'ai essayée et ça n'a pas l'air de changer quoi que ce soit. Les deux éléments reçoivent toujours '2' comme valeur de x. – Quintus

Je pense, dans ce cas, "x" sera un objet d'événement (en fonction du navigateur). Si vous deviez supprimer le paramètre "x" de la ligne "return function (x)", je pense que ce serait parfait. –

NM - belle solution simple. Bien sûr, la section intérieure pourrait également être écrite comme suit:

 return function(){ 
      $(this).html("You clicked item " + x); 
     };

Source

2010-07-09 21:07:49

Définition de données dynamiques sur les éléments JQuery dynamiques

Répondre

Questions connexes