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

Question

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 que este input-image está emparejado, configuro un controlador de eventos para el input-image.Luego, cuando el usuario hace clic en image, aparecen 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.Intenté lo siguiente, pero fue en vano.

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

Answer 1

jQuery & # 8805; 1.7

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

$('#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 se activarán.

Como la gente ha dicho, puede usar desvincular 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 pueda haberse agregado), puede usar el espacio de nombres de evento:

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

y para eliminar solo su evento:

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

Answer 2

Esto no estaba disponible cuando se respondió esta pregunta, pero también puede usar el live () 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 #disparable, 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 'inhabilitada', 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 3

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

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

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

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 me enteré de desvincular). Hay alguna descripción útil de estas estrategias en las respuestas.

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

Answer 4

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

Usando argumentos.callee , podemos asegurarnos de que se elimine el controlador de una función anónima específica y, por lo tanto, tener un controlador de tiempo único para un evento determinado. Espero que esto ayude a otros.

Answer 5

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

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

Answer 6

Tuve que configurar el evento como nulo usando el accesorio y el atributo. No podría hacerlo con uno u otro. Tampoco pude hacer que .unbind funcione. Estoy trabajando en un elemento TD.

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

Answer 7

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

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

});​

Answer 8

Es posible que esté agregando el controlador onclick 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 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.

Answer 9

Actualizado para 2014

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

Answer 10

La mejor manera de eliminar el evento onclick en línea es $(element).prop('onclick', null);

Answer 11

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é junto con ajaxComplete. No necesariamente el mismo comportamiento pero algo similar.

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

function executePageLock(){
    //do something
}

Answer 12

En caso .on() El método se usó anteriormente con un selector particular, como en el siguiente ejemplo:

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

Ambos unbind() y .off() métodos no son yendo a trabajar.

Sin embargo, .no delegado() El método 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 13

A remove TODO event-handlers, esto es lo que funcionó para mí:

Eliminar todos los controladores de eventos significa tener el formato simple HTML structure sin todos los event handlers adjunto a element y es 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 la clone en lugar de la original con ningún event-handlers en eso.

Buena suerte...

Answer 14

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

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

Answer 15

si configura onclick a través de html necesita 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 16

Todos los enfoques descritos no funcionaron para mí 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 pude desvincular el " .button " clase Acabo de asignar otra clase al botón que tenía los mismos estilos CSS. Al hacerlo, el controlador en vivo / en evento omitió el clic finalmente:

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

Espero que eso ayude.

Answer 17

Espero que mi siguiente código lo explique 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 18

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 con nombre como 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 19

Si usa $(document).on() para agregar un oyente a un elemento creado dinámicamente, entonces deberá usar lo siguiente para eliminarlo:

// add the listener
$(document).on('click','.element',function(){
    // stuff
});

// remove the listener
$(document).off("click", ".element");