2016-07-24 32 views
-1

Erstellen einer Liste von Links dynamisch mit jQuery, und wollte getrennte Ereignisse click zu jedem von ihnen zu binden.JQuery dynamisch erstellte Elemente und Klickereignis

for (var i = 0; i < 7; i++) { 
 
    var li = $('<div>').addClass('text-primary').css("curser", "pointer").appendTo($("#AK_test")); 
 
    var aleg = $('<a>').addClass('pull-left text-primary').css('color','#337ab7').text(" Clickable link # " + i); 
 

 
    aleg.on("click", function() { 
 
     alert("clicked # " + i); 
 
    }); 
 
    aleg.appendTo(li); 
 
    $('<br>').appendTo(li); 
 
}
<div id="AK_test"></div> 
 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>

In diesem Beispiel Alarm zeigt immer 7 (letzter Wert von i).

Meine Frage: Warum? Für jeden Link sollte ein separater Wert von i im Alert angezeigt werden.

+0

Willkommen bei Stack-Überlauf! Der vollständige Inhalt Ihrer Frage muss ** in ** Ihrer Frage sein, nicht nur verknüpft. Links verrotten, was die Frage und ihre Antworten in Zukunft für die Menschen nutzlos macht, und die Leute sollten nicht von außerhalb gehen müssen, um Ihnen zu helfen. Setzen Sie eine [mcve] ** in ** die Frage, idealerweise mit Hilfe von Stack Snippets (der '<>' Symbolleistenschaltfläche), um es runnable zu machen. Mehr: [* Wie stelle ich eine gute Frage? *] (/ Help/how-to-ask) –

+2

Von Ihrer Beschreibung ist dies wahrscheinlich ein Duplikat von [* JavaScript Closure in Loops - einfaches praktisches Beispiel *] (http: //stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example). –

Antwort

0

Dank T.J. Crowder, um die ursprüngliche Lösung zu finden.

ist hier gleiche fix Problem Code -my in dieser Frage-

for (var i = 0; i < 7; i++) { 
     var li = $('<div>').appendTo($("#AK_test")); 
     var aleg = $('<a>').css('color','#337ab7').text(" link # " + i); 

     aleg.on("click", createClickEvent(i)); 
     aleg.appendTo(li); 
     $('<br>').appendTo(li); 
    } 
    function createClickEvent(i) { 
     return function() { alert(i); }; 
    } 
    <div id="AK_test"></div> 
Verwandte Themen