saber - ¿Debo desvincular el evento jquery antes de eliminar el elemento?
saber en que elemento se hizo click jquery (3)
Es mejor desvincularse, pero debe.
La mayoría de los navegadores manejan esto correctamente y eliminan esos manejadores ellos mismos.
También puede ver do-i-need-to-remove-event-listeners
Mejor forma de manejar este problema, puede usar el delegado de evento.
Tengo una página usando jquery-ui-dialog. Cada vez que se abre el diálogo, los contenidos de la página se cargan usando ajax. Luego vincula algún evento usando jquery "on ()". Cuando el diálogo se cierre, vaciará su contenido.
La pregunta es , ¿debo desvincular los eventos en ".ajax-content" antes de $ .empty ()?
editar : preocupación 1. ¿ Alguna posible degradación del rendimiento de JS? si vacío () cientos de nodos de esta manera.
preocupación 2. eliminar elemento también eliminar eventos de la memoria (o la cadena de ejecución / evaluación de jquery)?
No les estoy haciendo nada por ahora. Si el cuadro de diálogo abrir / cerrar muchas veces sin actualizar la página, ¿causaría algún problema?
Código se ve así:
<div id="jquery-dialog" class="container">
<div class="ajax-content">
some buttons....
</div>
</div>
------after each ajax load------------
$(".ajax-content").on("click", ".button", function(event) {
//handles the click
});
------on dialog close------------
$("#jquery-dialog").empty();
Hola, sé que esta es una respuesta antigua, pero creo que la respuesta aceptada es engañosa.
Aunque es correcto decir que deberá desvincular eventos en JS sin formato para evitar fugas de memoria en navegadores antiguos (ehem IE), llamar a remove () o empty () ya lo hará por usted.
Por lo tanto, su llamada actual a empty () debería ser suficiente, no es necesario que esté precedida por unbind ()
De jQuery docs ( http://api.jquery.com/empty/ )
Para evitar fugas de memoria, jQuery elimina otras construcciones, como los manejadores de datos y eventos, de los elementos secundarios antes de eliminar los elementos.
La respuesta de Oscar es incompleta, si dentro de su parcial (vista que está cargada a través de ajax) adjuntó eventos usando .on (), entonces debe llamar a .off () antes de .empty ().
Mire en el siguiente código, si no se llama .off (), los eventos asignados en p1.html a través del controlador estándar .click () se eliminan al llamar a .empty (), pero los eventos asignados en p2.html a través de .on () son no eliminado y reasignado cada vez que se carga el parcial.
index.html
<html>
<body>
<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id=''spi'' style="padding: 20px; border: 1px solid #666;">
</div>
<br/>
<a href="p1.html" class="spi">Load Partial 1</a> |
<a href="p2.html" class="spi">Load Partial 2</a>
<script type="text/javascript">
$(document).on(''click'', ''a.spi'' , function(e) {
e.preventDefault();
/*
!!! IMPORTANT !!!
If you do not call .off(),
events assigned on p2.html via .on()
are kept and fired one time for each time p2.html was loaded
*/
$("#spi").off();
$("#spi").empty();
$("#spi").load($(this).attr(''href''));
});
</script>
</body>
</html>
p1.html
This is the partial 1<br/>
<br/>
<br/>
<a href="javascript:void(0)" id=''p1_l1''>Link 1</a>
<br/><br/>
<a href="javascript:void(0)" id=''p1_l2''>Link 2</a>
<br/><br/>
<a href="javascript:void(0)" id=''p1_l3''>Link 3</a>
<script type="text/javascript">
$("#p1_l1").click(function(e) {
e.preventDefault();
console.debug("P1: p1_l1");
});
$("#p1_l2").click(function(e) {
e.preventDefault();
console.debug("P1: p1_l2");
});
</script>
p2.html
This is the partial 2<br/>
<br/>
<br/>
<a href="javascript:void(0)" id=''p2_l1''>Link 1</a>
<br/><br/>
<a href="javascript:void(0)" id=''p2_l2''>Link 2</a>
<script type="text/javascript">
$("#spi").on(''click'', ''a'', function(e) {
e.preventDefault();
console.debug( ''P2: '' + $(this).attr(''id'') );
});
</script>