jquery DOM-Mutation

Question

Ich habe dies gemacht:

<span class="a">test 1</span><div></div> 

Warum .b nicht die Benachrichtigung aktivieren?

$(".a").click(function() { 
$('div').html('<span class="b">test 2</span>'); 
}); 

$(".b").click(function() { 
alert("Hello"); 
}); 

Ich verstehe nicht, wie man die Mutation des DOM erkennt.

Answer 1

Der Selektor wird bei Ausführung ausgeführt, was bedeutet, dass .b bereits nach dem Laden der Seite gesucht wurde, anstatt nach dem Hinzufügen des Doms.

Um zu zeigen, wie Wähler in Zeile ausführen, funktioniert der Code, wenn Sie es direkt nach dem Anhängen des Elements definieren:

$(".a").click(function() { 
 
    $('div').html('<span class="b">test 2</span>'); 
 
    $(".b").click(function() { 
 
    alert("Hello"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="a">test 1</span><div></div>

jedoch, der richtige Weg, dies zu tun wäre, Definieren eines übergeordneten Selektors Im Folgenden wird ein Klickereignis auf das übergeordnete Element gesetzt, das den target für den .b Selektor filtert.

$(".a").click(function() { 
 
    $('div').html('<span class="b">test 2</span>'); 
 
}); 
 

 
$(document.body).on("click", ".b", function() { 
 
    alert("Hello"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="a">test 1</span><div></div>

Answer 2

seit .b erstellt wird, nachdem die Abfrage durchgeführt wurde. Wenn Sie $(".b") in Ihrem Skript aufrufen, wird nichts gefunden, und das Ereignis click ist nicht daran angehängt. Sie können es lösen, indem das Ereignis an das Dokument angehängt wird, wie so:

$(document).on("click", ".b", function() { 
    alert("hello"); 
}); 

Answer 3

Die click() Bindung Sie verwenden eine „direkte“ Bindung bezeichnet wird, die nur die Handler Elemente anfügen, die bereits vorhanden sind. Es wird nicht an Elemente gebunden, die in Zukunft erstellt werden. Um dies zu tun, müssen Sie eine "delegierte" Bindung erstellen, indem Sie on() verwenden.

$('div').on("click", ".b", function() { 
    alert("hello"); 
});