puede utilizar el 2 métodos siguientes jQuery proporciona:
El primero, es el método .live(), y el otro es el método de .delegate().
El uso de la primera es muy simple:
$(document).ready(function() {
$("#dynamicElement").live("click", function() {
//do something
});
}
Como se puede ver, el primer argumento es el evento que desea enlazar, y la segunda es una función que controla el evento. La forma en que esto funciona no es exactamente como una "repetición". La forma común de hacerlo ($("#dynamicElement").click(...) o $("#dynamicElement").bind("click", ...)) funciona asociando el controlador de evento de un evento determinado al elemento DOM cuando el DOM se ha cargado correctamente ($(document).ready(...)). Ahora, obviamente, esto no funcionará con elementos generados dinámicamente, porque no están presentes cuando el DOM carga primero.
La forma .live() funciona es, en lugar de asociar el controlador de ventilación para el propio elemento DOM, se adhiere con el elemento document, aprovechando la propiedad de burbujeo de JS & DOM (Al hacer clic en el elemento generado dinámicamente y no se adjunta controlador de eventos, sigue buscando hasta la parte superior hasta que encuentre uno).
Suena bastante limpio, ¿verdad? Pero hay un pequeño problema técnico con este método, como dije, conecta el manejador de eventos a la parte superior del DOM, por lo que cuando haces clic en el elemento, tu navegador debe atravesar todo el árbol DOM, hasta que encuentre el evento apropiado entrenador de animales. Proceso que es muy ineficiente, por cierto. Y aquí es donde aparece el método .delegate().
Supongamos la siguiente Estructura HTML:
<html>
<head>
...
</head>
<body>
<div id="links-container">
<!-- Here's where the dynamically generated content will be -->
</div>
</body>
</html>
Así, con el método .delegate(), en lugar de unirse al controlador de eventos a la parte superior de la DOM, que sólo podría adjuntarlo a un DOM padres Elemento. Un elemento DOM está seguro de que va a estar en alguna parte del contenido generado dinámicamente en el Árbol DOM. Cuanto más cerca de ellos, mejor funcionará. Por lo tanto, esto debería hacer la magia:
$(document).ready(function() {
$("#links-container").delegate("#dynamicElement", "click", function() {
//do something
});
}
Esta fue una especie de respuesta larga, pero me gusta para explicar la teoría detrás de ella jaja.
EDIT: Debe corregir su marcado, no es válido porque: 1) Los anclajes no permiten el uso de un atributo de valor, y 2) No puede tener 2 o más etiquetas con la misma ID. Prueba esto:
<a class="removeLineItem" id="delete-1">Delete</a>
<a class="removeLineItem" id="delete-2">Delete</a>
<a class="removeLineItem" id="delete-3">Delete</a>
Y para determinar cuál de los anclajes se hace clic
$(document).ready(function() {
$("#links-container").delegate(".removeLineItem", "click", function() {
var anchorClicked = $(this).attr("id"),
valueClicked = anchorClicked.split("-")[1];
});
}
Con ese código, se han almacenado en la variable anchorClicked el identificador del enlace se hace clic, y en el valueClicked el número asociado al ancla.
Lea en las instalaciones jQuery "en vivo" y "delegar". – Pointy