En jQuery, ¿hay alguna manera de vincular solo un clic una vez?

Question

Tengo una aplicación ajax que ejecutará funciones en cada interacción. Me gustaría poder ejecutar mi función de configuración cada vez para que todo mi código de configuración para esa función permanezca encapsulado. Sin embargo, los elementos de unión más de una vez significan que el controlador se ejecutará más de una vez, lo que obviamente es indeseable. ¿Hay alguna manera elegante en jQuery de invocar bind en un elemento más de una vez sin que se llame al controlador más de una vez?

Answer 1

podría adjuntar el evento para document con la función one():

$(document).one('click', function(e) { 
    // initialization here 
}); 

Una vez ejecutado, este controlador de eventos se elimina de nuevo por lo que no va a funcionar de nuevo. Sin embargo, si necesita la inicialización para ejecutar antes de el evento click de algún otro elemento, tendremos que pensar en otra cosa. Usar mousedown en lugar de click podría funcionar entonces, ya que el evento mousedown se activa antes del evento click.

Answer 2

El usuario jQuery one funciona como Tom dijo, pero desactive el controlador cada vez antes de volver a vincular. Ayuda tener el controlador de eventos asignado a una variable que usar una función anónima.

var handler = function(e) { // stuff }; 

$('#element').unbind('click', handler).one('click', handler); 

//elsewhere 
$('#element').unbind('click', handler).one('click', handler); 

También se puede hacer .unbind('click') para eliminar todos los manipuladores clic adjuntos a un elemento.

Answer 3

La respuesta de Chetan Sastry es lo que quieres. Básicamente solo llame a $ (elemento) .unbind (evento); antes de cada evento.

Así que si usted tiene una función como loadAllButtonClicks() que contiene todos los métodos

$(element).on("click", function(){}); 

para cada botón en su página, y que corra el que cada vez que se hace clic en un botón, esto obviamente va a producir más de un evento para cada botón. Para solucionar esto sólo tiene que añadir

$(element).unbind(event); 

antes de cada

$(element).on("click", function(){}); 

y va a desatar todos los eventos de ese elemento, a continuación, añadir el evento solo clic.

Answer 4

También puede usar .off() si desvincular no hace el truco. Asegúrese de que el selector y evento dado a .OFF coinciden exactamente con los previstos inicialmente para .ON():

$("div.selector").off("click", "a.another_selector");  
$("div.selector").on("click", "a.another_selector", function(e){ 

Esto es lo que funcionó para mí en la resolución de la misma ajax recarga problema.