Dynamisch erstellte Anker-Links, die keine "Klick" -Ereignisse erhalten? - Javascript, Jquery, Twitter-Bootstrap

Ich verwende JS, um den folgenden HTML-Code zu erstellen. (Dies ist eine Bootstrap-Dropdown-Schaltfläche.)

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle my-status" data-toggle="dropdown">
Status <span class="caret"></span>
</button>
<ul class="dropdown-menu status-menu" role="menu">
<li><a href="#" class="status" data-status-id="0">None</a></li>
</ul>
</div>

Und in JQuery versuche ich, Klicks auf den darin enthaltenen Link zu verarbeiten.

$("li").on("click", "a.status", function(e) {
e.preventDefault();
alert("hi");
});

Ich habe sechs verschiedene Möglichkeiten ausprobiert, um diese Links auszuwählen, aber nichts, was ich tue, scheint es zu fassen.

Da sie dynamisch erstellt werden, weiß ich, dass ich die Funktion "Ein" verwenden muss, aber sie scheint nicht im geringsten zu funktionieren.

Ich kann es in einer JSFiddle zum Laufen bringen, aber der Code dort wird nicht dynamisch erstellt - was meiner Meinung nach das Problem ist.

Gibt es etwas dummes, das ich hier vermisse?

Antworten:

4 für die Antwort № 1

Wenn dieser gesamte HTML-Block dynamisch ist, müssen Sie den Container als Ziel festlegen, an den HTML angehängt wird, und ihn verwenden on

$(containerOfAppendedContent).on("click", ".btn-group li a", function() {

---

4 für die Antwort № 2

Angenommen, der gesamte von Ihnen gepostete Codeblock istWenn Sie Ereignisse an dynamisch hinzugefügte Elemente binden, müssen Sie sie an Elemente binden, die sich beim Ausführen des Codes bereits im DOM befinden. Dies gilt auch für die Liste. Versuchen:

$(document).on("click", "a.status", function(e) {
e.preventDefault();
alert("hi");
});

$(document) Dies ist ein Worst-Case-Szenario. Wenn Sie also ein Element haben, das näher an den Elementen liegt, die dynamisch hinzugefügt werden und bei der Ausführung von jQuery vorhanden sind, verwenden Sie dieses über document.

---

4 für die Antwort № 3

Stellen Sie sicher, dass Sie ein statisches übergeordnetes Element auswählen li wird auch dynamisch erstellt, verwenden Sie das übergeordnete Element oder das übergeordnete Element des übergeordneten Elements

$("div.btn-group").on("click", "ul li a.status", function(e) {
e.preventDefault();
alert("hi");
});

Wenn dieser div auch dynamisch erstellt wird, können Sie zum gehen body oder auch document

$(document).on("click", "ul li a.status", function(e) {
e.preventDefault();
alert("hi");
});

---

2 für die Antwort № 4

Warum generieren Sie das Ancor-Tag nicht mit einer Onclick-Funktion?

<li><a href="#" class="status" data-status-id="0" onclick="DoSomething();">None</a></li>
<script>
function DoSomething(){
// Do your work
}
</script>

Hoffe das hilft

---

1 für die Antwort № 5

Benutze das Veränderung li zu document

$(document).on("click", "a.status", function(e) {
e.preventDefault();
alert("hi");
});

---