È possibile utilizzare i seguenti 2 metodi jQuery fornisce:
Il primo, è il metodo .live(), e l'altro è il metodo .delegate().
L'uso del primo è molto semplice:
$(document).ready(function() {
$("#dynamicElement").live("click", function() {
//do something
});
}
Come si può vedere, il primo argomento è l'evento che si desidera associare, e il secondo è una funzione che gestisce l'evento. Il modo in cui funziona non è esattamente come un "re-rendering". Il modo comune per farlo ($("#dynamicElement").click(...) o $("#dynamicElement").bind("click", ...)) funziona collegando il gestore di eventi di un determinato evento all'elemento DOM quando il DOM è stato caricato correttamente ($(document).ready(...)). Ora, ovviamente, questo non funzionerà con elementi generati dinamicamente, perché non sono presenti quando il DOM viene caricato per la prima volta.
Il modo .Live() funziona è, invece di attaccare il gestore sfogo al DOM elemento stesso, attacca con l'elemento document, approfittando della proprietà ribollimento-up di JS & DOM (Quando si fa clic l'elemento generato dinamicamente e nessun gestore di eventi è collegato, continua a guardare in alto finché non ne trova uno).
Suoni abbastanza accurati, giusto? Ma c'è un piccolo problema tecnico con questo metodo, come ho detto, allega il gestore di eventi alla parte superiore del DOM, quindi quando fai clic sull'elemento, il tuo browser deve attraversare tutto l'albero DOM, fino a trovare l'evento appropriato handler. Processo che è molto inefficiente, a proposito. Ed ecco dove appare il metodo .delegate().
Supponiamo la seguente estructure HTML:
<html>
<head>
...
</head>
<body>
<div id="links-container">
<!-- Here's where the dynamically generated content will be -->
</div>
</body>
</html>
Così, con il metodo .delegate(), invece di legare il gestore di eventi per la parte superiore del DOM, basta potrebbe allegarlo a un DOM genitore Elemento. Un elemento DOM sei sicuro che si troverà da qualche parte sopra il contenuto generato dinamicamente nell'albero DOM. Più vicino a loro, meglio funzionerà. Quindi, questo dovrebbe fare la magia:
$(document).ready(function() {
$("#links-container").delegate("#dynamicElement", "click", function() {
//do something
});
}
Questa era una specie di lunga risposta, ma mi piace per spiegare la teoria dietro di esso haha.
MODIFICA: È necessario correggere il markup, non valido perché: 1) Gli ancoraggi non consentono l'uso di un attributo valore e 2) Non è possibile avere 2 o più tag con lo stesso ID. Prova questo:
<a class="removeLineItem" id="delete-1">Delete</a>
<a class="removeLineItem" id="delete-2">Delete</a>
<a class="removeLineItem" id="delete-3">Delete</a>
E per determinare quale uno degli ancoraggi stato cliccato
$(document).ready(function() {
$("#links-container").delegate(".removeLineItem", "click", function() {
var anchorClicked = $(this).attr("id"),
valueClicked = anchorClicked.split("-")[1];
});
}
Con questo codice, avrete memorizzato nella variabile anchorClicked l'id del collegamento cliccato, e nel valueClicked il numero associato all'ancora.
Leggere le strutture "live" e "delegato" di jQuery. – Pointy