Pregunta ¿La mejor forma de eliminar un controlador de eventos en jQuery?


Yo tengo un input type="image". Esto actúa como las notas de celda en Microsoft Excel. Si alguien ingresa un número en el cuadro de texto, esto input-image está emparejado con, configuré un controlador de eventos para input-image. Luego, cuando el usuario haga clic en image, reciben una pequeña ventana emergente para agregar algunas notas a los datos.

Mi problema es que cuando un usuario ingresa un cero en el cuadro de texto, necesito desactivar el input-imagecontrolador de eventos de. He intentado lo siguiente, pero fue en vano.

$('#myimage').click(function { return false; });

969
2017-10-16 15:28


origen


Respuestas:


jQuery ≥ 1.7

Con jQuery 1.7 en adelante, la API del evento se ha actualizado, .bind()/.unbind() todavía están disponibles para compatibilidad con versiones anteriores, pero el método preferido es utilizar el en()/apagado() funciones. Lo siguiente sería ahora,

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

jQuery <1.7

En su código de ejemplo, simplemente está agregando otro evento de clic a la imagen, sin sobrepasar el anterior:

$('#myimage').click(function() { return false; }); // Adds another click event

Ambos eventos de clics serán despedidos.

Como la gente ha dicho, puedes usar la opción de deshacer para eliminar todos los eventos de clics:

$('#myimage').unbind('click');

Si desea agregar un solo evento y luego eliminarlo (sin eliminar otros que podrían haberse agregado), puede usar el espacio de nombres de eventos:

$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });

y para eliminar solo su evento:

$('#myimage').unbind('click.mynamespace');

1494
2017-10-16 21:13



Esto no estaba disponible cuando se respondió esta pregunta, pero también puede usar vivir() método para habilitar / deshabilitar eventos.

$('#myimage:not(.disabled)').live('click', myclickevent);

$('#mydisablebutton').click( function () { $('#myimage').addClass('disabled'); });

Lo que sucederá con este código es que cuando haga clic en el botón #mydisable, agregará la clase deshabilitada al elemento #myimage. Esto hará que el selector ya no coincida con el elemento y el evento no se disparará hasta que se elimine la clase 'disabled', haciendo que el selector .live () sea válido nuevamente.

Esto tiene otros beneficios al agregar estilo basado en esa clase también.


59
2017-07-23 17:57



Esto se puede hacer utilizando la función de desvinculación.

$('#myimage').unbind('click');

Puede agregar múltiples manejadores de eventos al mismo objeto y evento en jquery. Esto significa que agregar uno nuevo no reemplaza a los anteriores.

Existen varias estrategias para cambiar los manejadores de eventos, como los espacios de nombres de eventos. Hay algunas páginas sobre esto en los documentos en línea.

Mire esta pregunta (así es como aprendí de desvinculación). Hay una descripción útil de estas estrategias en las respuestas.

Cómo leer las funciones de devolución de llamada enlazadas en jquery


37
2017-10-16 15:35



Si quieres responder a un evento solo una vez, la siguiente sintaxis debería ser realmente útil:

 $('.myLink').bind('click', function() {
   //do some things

   $(this).unbind('click', arguments.callee); //unbind *just this handler*
 });

Utilizando arguments.callee, podemos asegurarnos de que se elimine el controlador de función anónima específico y, por lo tanto, tener un solo controlador de tiempo para un evento determinado. Espero que esto ayude a otros.


34
2017-08-05 07:29



tal vez el método de desvinculación funcione para usted

$("#myimage").unbind("click");

29
2017-10-16 15:31



Tuve que configurar el evento para null usando el prop y el attr. No podría hacerlo con uno o el otro. Tampoco pude conseguir .unbind para trabajar. Estoy trabajando en un elemento TD.

.prop("onclick", null).attr("onclick", null)

29
2018-03-28 14:44



Usted puede estar agregando el onclick manejador como marcado en línea:

<input id="addreport" type="button" value="Add New Report" onclick="openAdd()" />

Si es así, el jquery .off() o .unbind() no funcionará También debe agregar el controlador de eventos original en jquery:

$("#addreport").on("click", "", function (e) {
   openAdd();
});

Entonces el jquery tiene una referencia al controlador de eventos y puede eliminarlo:

$("#addreport").off("click")

VoidKing menciona esto un poco más oblicuamente en un comentario anterior.


10
2018-01-21 22:25



Si el evento está adjunto de esta manera, y el objetivo es ser desacoplado:

$('#container').on('click','span',function(eo){
    alert(1);

    $(this).off(); //seams easy, but does not work

    $('#container').off('click','span'); //clears click event for every span

    $(this).on("click",function(){return false;}); //this works.

});​

9
2018-06-26 13:02