JQuery événement click intérieur pour

Question

Je ne pas vraiment savoir ce qui me passe ..

Le code est comme:

for (var j=0; j<tours.length; j++){ 
    var name = tours[j].name; 

    var $tourLI = $('<li id="'+name+'"></li>'); 
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>'); 

    $tourButton.click(function() { 
     alert(name); 
    } 
} 

je essaie de lier l'événement de clic pour chaque bouton qui affiche le nom des visites, mais affiche toujours le nom du dernier tour, quel que soit le bouton sur lequel je clique.

Qu'est-ce que je fais mal?

Merci!

Answer 1

vous devez envelopper le gestionnaire de clic dans une fermeture de «gros sur la valeur du var iable name avant que la boucle for ne se mette en marche. Cela est dû au fait que le gestionnaire n'est pas réellement exécuté tant que vous n'avez pas cliqué dessus. Dans le cas contraire, il utilisera simplement la valeur actuelle de name à ce moment-là (quelle que soit la dernière valeur de la boucle).

for (var j=0; j<tours.length; j++){ 
    var name = tours[j].name; 

    var $tourLI = $('<li id="'+name+'"></li>'); 
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>'); 

    (function(n) { 
     $tourButton.click(function() { 
      alert(n); 
     }); 
    })(name) 
} 

Answer 2

Lorsque le clic est déclenché j aura la valeur tours.length. Vous pouvez verrouiller la valeur de boucle, ainsi que le reste des variables à travers des fermetures.

for (var j=0; j<tours.length; j++){ 
    (function(){ 
    var currentJValue = j; 
    var name = tours[currentJValue].name; 

    var $tourLI = $('<li id="'+name+'"></li>'); 
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>'); 

    $tourButton.click(function() { 
     alert(name); 
    } 
    })(); 
} 

Answer 3

pas besoin d'appeler l'événement cliquez sur le bouton à l'intérieur loop..append créé dynamiquement et l'appeler en dehors de la boucle et utiliser le cas délégué

essayer cette

$(document).on('click','div.button-inside',function() { 
    alert($(this).text()); 
} 

vous pouvez passer par le link si vous voulez en savoir plus sur les événements délégués ...

Answer 4

Try this ...

$('.div.button-inside ').on('click',function() { 
    alert($(this).text()); 
}