Sie können die 2 folgenden Methoden jQuery bietet verwenden:
Die erste ist die .live() Verfahren und das andere ist die .delegate() Methode.
Die Nutzung der erste ist sehr einfach:
$(document).ready(function() {
$("#dynamicElement").live("click", function() {
//do something
});
}
Wie Sie das erste Argument ist zu sehen, das Ereignis, das Sie binden möchten, und die zweite ist eine Funktion, die das Ereignis behandelt. Die Art und Weise, wie das funktioniert, ist nicht genau wie ein "Re-Rendering". Die übliche Vorgehensweise ($("#dynamicElement").click(...) oder $("#dynamicElement").bind("click", ...)) funktioniert, indem Sie den Ereignishandler eines bestimmten Ereignisses an das DOM-Element anfügen, wenn das DOM ordnungsgemäß geladen wurde ($(document).ready(...)). Dies funktioniert natürlich nicht mit dynamisch generierten Elementen, da diese beim ersten Laden des DOM nicht vorhanden sind.
Die Art und Weise .live() funktioniert, ist, anstatt die Lüftungs Handler auf das DOM-Element angebracht selbst, sie legt es mit dem document Element, unter Ausnutzung der sprudelnden-up Eigentum von JS & DOM unter (Wenn Sie auf die Schaltfläche dynamisch generiertes Element und es ist kein Event-Handler angehängt, es schaut weiter nach oben, bis es einen findet).
Klingt ziemlich ordentlich, oder? Aber es gibt ein kleines technisches Problem mit dieser Methode, wie gesagt, es fügt den Event-Handler an den Anfang des DOM an. Wenn Sie also auf das Element klicken, muss Ihr Browser den gesamten DOM-Baum durchlaufen, bis er das richtige Ereignis findet Handler. Prozess, der übrigens sehr ineffizient ist. Und hier erscheint die .delegate() Methode.
Lassen Sie uns die folgende HTML ESTRUCTURE annehmen:
<html>
<head>
...
</head>
<body>
<div id="links-container">
<!-- Here's where the dynamically generated content will be -->
</div>
</body>
</html>
Also, mit dem .delegate() -Methode, statt den Event-Handler an die Spitze des DOM zu binden, können Sie es zu einem übergeordneten DOM konnte diese anhängen Element. Ein DOM-Element, von dem Sie sicher sind, dass es irgendwo im dynamisch generierten Inhalt der DOM-Struktur liegt. Je näher sie sind, desto besser wird das funktionieren. So soll dies die Magie tun:
$(document).ready(function() {
$("#links-container").delegate("#dynamicElement", "click", function() {
//do something
});
}
Das war ein bisschen eine lange Antwort, aber Ich mag die Theorie dahinter erklären, haha.
EDIT: Sie sollten Ihr Markup korrigieren, es ist ungültig, weil: 1) die Anker die Verwendung eines Wertattributs nicht zulassen, und 2) Sie können nicht 2 oder mehr Tags mit der gleichen ID haben. Versuchen Sie folgendes:
<a class="removeLineItem" id="delete-1">Delete</a>
<a class="removeLineItem" id="delete-2">Delete</a>
<a class="removeLineItem" id="delete-3">Delete</a>
und zu bestimmen, welche der Anker
$(document).ready(function() {
$("#links-container").delegate(".removeLineItem", "click", function() {
var anchorClicked = $(this).attr("id"),
valueClicked = anchorClicked.split("-")[1];
});
}
Mit diesem Code geklickt wurde, werden Sie in der anchorClicked Variable die ID der Verbindung gespeichert geklickt haben, und in der valueClicked die Nummer, die dem Anker zugeordnet ist.
Lesen Sie auf den jQuery "Live" und "Delegate" Einrichtungen. – Pointy