texto - ¿La mejor manera de eliminar un controlador de eventos en jQuery?

obtener el texto de un label jquery

Question

Tengo un input type="image" . Esto actúa como las notas de la celda en Microsoft Excel. Si alguien ingresa un número en el cuadro de texto con el cual esta input-image está emparejada, configuro un controlador de eventos para la input-image . Luego, cuando el usuario hace clic en la image , aparece 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 deshabilitar el controlador de eventos de la input-image . He intentado lo siguiente, pero en vano.

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

Answer 1

Para remove TODOS event-handlers , esto es lo que funcionó para mí:

Eliminar todos los controladores de eventos significa tener la HTML structure simple sin todos los event handlers conectados al element y sus child nodes . Para hacer esto, jQuery''s clone() ayudó.

var original, clone;
// element with id my-div and its child nodes have some event-handlers
original = $(''#my-div'');
clone = original.clone();
//
original.replaceWith(clone);

Con esto, tendremos el clone en lugar del original sin event-handlers .

Buena suerte...

Answer 2

jQuery ≥ 1.7

Con jQuery 1.7 en adelante, la API del evento se ha actualizado, .bind() / .unbind() todavía están disponibles para la compatibilidad con versiones anteriores, pero el método preferido es usar las funciones on() / off() . El 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 anular el anterior:

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

Ambos eventos de clic serán despedidos.

Como la gente ha dicho, puedes usar el desvinculación para eliminar todos los eventos de clic:

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

Si desea agregar un solo evento y luego eliminarlo (sin eliminar ningún otro que se haya agregado), puede usar el espacio de nombres de eventos:

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

y para eliminar solo tu evento:

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

Answer 3

En caso de que el método .on() se haya utilizado anteriormente con un selector en particular, como en el siguiente ejemplo:

$(''body'').on(''click'', ''.dynamicTarget'', function () {
    // Code goes here
});

Los métodos unbind() y .off() no van a funcionar.

Sin embargo, el método .undelegate() podría usarse para eliminar completamente el controlador del evento para todos los elementos que coincidan con el selector actual:

$("body").undelegate(".dynamicTarget", "click")

Answer 4

Espero que mi código de abajo lo explica todo. HTML:

(function($){

     $("#btn_add").on("click",function(){
       $("#btn_click").on("click",added_handler);
       alert("Added new handler to button 1");
     });

  
 
     $("#btn_remove").on("click",function(){
       $("#btn_click").off("click",added_handler);
       alert("Removed new handler to button 1");
     });

  
   function fixed_handler(){
    alert("Fixed handler");
  }
  
   function added_handler(){
    alert("new handler");
  }
  
  $("#btn_click").on("click",fixed_handler);
  $("#btn_fixed").on("click",fixed_handler);
  
  
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_click">Button 1</button>
  <button id="btn_add">Add Handler</button>
  <button id="btn_remove">Remove Handler</button>
  <button id="btn_fixed">Fixed Handler</button>

Answer 5

Esto no estaba disponible cuando se respondió esta pregunta, pero también puede usar el método live() 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 al hacer clic en el botón #mydisablebb, se agregará la clase deshabilitada al elemento #myimage. Esto hará que el selector ya no coincida con el elemento y el evento no se activará hasta que la clase ''deshabilitada'' se elimine, lo que hace que el selector .live () vuelva a ser válido.

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

Answer 6

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

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

Puede agregar varios controladores de eventos al mismo objeto y evento en jquery. Esto significa que agregar una nueva no reemplaza a las antiguas.

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

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

Cómo leer las funciones de devolución de llamada de hover enlazado en jQuery

Answer 7

Esto también funciona bien. Simple y fácil. Vea http://jsfiddle.net/uZc8w/570/

$(''#myimage'').removeAttr("click");

Answer 8

Gracias por la información. muy útil, lo usé para bloquear la interacción de la página mientras estaba en modo de edición por otro usuario. Lo usé en conjunto con ajaxComplete. No necesariamente el mismo comportamiento sino algo similar.

function userPageLock(){
    $("body").bind("ajaxComplete.lockpage", function(){
        $("body").unbind("ajaxComplete.lockpage");
        executePageLock();      
    });
};  

function executePageLock(){
    //do something
}

Answer 9

La mejor forma de eliminar el evento inline onclick es $(element).prop(''onclick'', null);

Answer 10

Puede agregar el controlador onclick como onclick en línea:

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

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

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

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

$(''#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.

});​

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

Answer 11

Sé que esto llega tarde, pero ¿por qué no usar JS simple para eliminar el evento?

var myElement = document.getElementByID("your_ID");
myElement.onclick = null;

o, si usa una función nombrada como un controlador de eventos:

function eh(event){...}
var myElement = document.getElementByID("your_ID");
myElement.addEventListener("click",eh); // add event handler
myElement.removeEventListener("click",eh); //remove it

Answer 12

Si configura onclick través de html , debe removeAttr ($(this).removeAttr(''onclick''))

Si lo configura a través de jquery (como después del primer clic en mis ejemplos anteriores), entonces necesita unbind($(this).unbind(''click''))

Answer 13

Si desea 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*
 });

Mediante el uso de argument.callee , podemos asegurarnos de que se elimine el único 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 los demás.

Answer 14

Si el evento se adjunta de esta manera , y el objetivo debe estar desasociado:

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

Answer 15

Todos los enfoques descritos no me funcionaron porque estaba agregando el evento click con on() al documento donde se creó el elemento en tiempo de ejecución:

$(document).on("click", ".button", function() {
    doSomething();
});

Mi solución:

Como no podía desenlazar la clase ".button", simplemente asigné otra clase al botón que tenía los mismos estilos CSS. Al hacerlo, el controlador de eventos en vivo / en vivo ignoró finalmente el clic:

// prevent another click on the button by assigning another class
$(".button").attr("class","buttonOff");

Espero que ayude.

Answer 16

Tuve que establecer el evento en nulo usando el prop y el attr. No podía hacerlo con uno u otro. Tampoco pude conseguir que .unbind trabaje. Estoy trabajando en un elemento TD.

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

Answer 17

tal vez el método de desvinculación funcionará para ti

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

Answer 18

Actualizado para 2014

Con la última versión de jQuery, ahora puede desvincular todos los eventos en un espacio de nombres simplemente haciendo $( "#foo" ).off( ".myNamespace" );