dynamically - jquery previene duplicar la función asignada

on click live jquery

Question

Si necesito asignar una función de clic dinámicamente, ¿hay alguna forma de asegurar que la función de clic solo se asigne una vez y no se duplique?

this.click(function(){
alert(''test'');
})

Answer 1

Con jQuery .on() puedes hacer algo como eso:

//removes all binding to click for the namespace "myNamespace"
$(document).off(''click.myNamespace'');
$(document).on(''click.myNamespace'', ''.selector'', function(event) {...});
//this will be also removed (same namespace)
$(document).on(''click.myNamespace'', ''.anotherSelector'', function(event) {...}); 

Answer 2

Me gustaría añadir a la respuesta de Marius--

Al evitar los enlaces duplicados, no querrá desenlazar algo accidentalmente si se supone que hay más de una función vinculada a un evento. Esto es especialmente importante cuando estás trabajando en algo con múltiples desarrolladores. Para evitar esto puedes usar espacios de nombres de eventos:

//assuming this is a jquery object.
var alertEvent = ''click.alert''
this.unbind(alertEvent).bind(alertEvent,function(){
alert(''clicked once'');
});

Aquí ''alerta'' es el nombre del espacio de nombres para su evento de clic y solo las funciones que estaban vinculadas con ese espacio de nombres no estarán vinculadas.

Answer 3

Puede desvincular el evento de clic antes de volver a enlazarlo, de esa manera solo tendrá un evento adjunto:

//assuming this is a jquery object.
this.unbind("click");
this.click(function(){
alert("clicked once");
});

A partir de jQuery 1.7, haga clic ahora usa .on ( http://api.jquery.com/click/ ) por lo que el código correcto es ahora

//assuming this is a jquery object.
this.off("click");
this.click(function(){
alert("clicked once");
});

Esto desvinculará todos los eventos de clic (incluidos los creados por cualquier complemento que pueda estar usando). Para asegurarse de que solo se desvincula el evento, use los espacios de nombres. ( http://api.jquery.com/off/ )

//assuming this is a jquery object.
this.off("click.myApp");
this.on("click.myApp", function(){
alert("clicked once");
});

Aquí myApp es el espacio de nombres.

Answer 4

asumiendo que los elementos se están agregando al html y desea agregar un evento solo para los elementos agregados:

function addEvents2Elements()//prevent Duplicate
{
//this will add the event to all elements of class="ele2addevent"
$(''.ele2addevent'').not(''.clickbind'').on(''click'',function(){alert(''once'');})
//this will add a class an then the class="ele2addevent clickbind"
$(''.ele2addevent'').not(''.clickbind'').addClass(''.clickbind'');
//all elements of class="... clickbind" will not be catched anymore in the first line because of .not() every time you call this function
}
addEvents2Elements();

Asegúrese de agregar solo con la clase = "ele2addevent", porque después del enlace será class = "ele2addevent clickbind" y no se volverá a detectar ...