jQuery nicht Element der Auswahl

Question

Ich mache ein Programm, das Boxen erstellt, wenn ich auf eine Schaltfläche klicken. Ich habe eine "Modell" Box ausgeblendet, wenn ich auf die Schaltfläche klicke, klont sie die Modellbox und ändert ihre ID.

Innerhalb dieser Boxen habe ich einen Link, der eine Funktion zu tun haben, wenn sie angeklickt, aber jQuery scheint nicht auf dieses Element zu finden, so dass ich nichts, wenn ich auf den Link klicken.

Hier ist mein Code:

$('#box-' + number).find('a').click(function(){ 
    alert('boop'); //function 
}); 

Variable 'Anzahl' ist die Nummer der Box. Wie gesagt, die ID wird geändert, wenn ich die Modellbox kloniere.

Das Modell Box ist so etwas wie dieses:

<div id="box-model"> 
    <div class="box"> 
     <div class="heading"> 
     <a class="link-class">¡Click Me!</a> 
     </div> 
     <div class="body"> 
     CONTENT 
     </div> 
    </div> 
</div> 

Answer 1

Sie müssen die Ereignisdelegierung verwenden, um Ereignisse an dynamisch hinzugefügte Elemente anzuhängen.

Da die IDs dynamisch generiert werden, können Sie sie nicht als Wähler in Ereignisse Delegation verwenden. Sie verwenden Klassenauswahl Zielankerelemente innerhalb .header Rether kann:

$('body').on('click','.heading a',function(){ 
    alert('boop'); //function 
}); 

Answer 2

$("body").find('#box-' + number).find('a').click(function(){ 
    alert('boop'); //function 
}); 

Die Sache ist, hat jQuery geladen DOM, bevor das Feld erzeugt wird. Unter der Annahme, diesen Code in Ihrem $ (document) .ready (function()), Ihre Boxen sind noch nicht erzeugt wird, wenn das Dokument fertig ist. Sie müssen zum übergeordneten Element "#box" wechseln, das am Anfang generiert wurde (es muss nicht body sein)