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

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 con el que input-imageestá emparejado, configuro un controlador de eventos para el input-image. Luego, cuando el usuario hace clic en image, obtiene 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 input-imagecontrolador de eventos del. He intentado lo siguiente, pero fue en vano.

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

jQuery ≥ 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 usar las funciones on () / off () . Lo 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 eventos:

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

y para eliminar solo tu evento:

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

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 cuando hace 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 () sea válido nuevamente.

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

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.

Esto se puede hacer utilizando 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 del cursor en jquery

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

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

Tuve que configurar el evento en nulo usando el accesorio y el attr. 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)

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.

});​

Puede agregar el onclickcontrolador 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();
});

Luego, 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.

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" );

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

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

Eliminar todos los controladores de eventos significa tener el plano HTML structuresin todos los event handlersadjuntos al elementy su 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 clonelugar en lugar del originalsin event-handlersél.

Buena suerte...

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
}

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

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

Ambos unbind()y los .off()métodos 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")

Si utiliza $(document).on()para agregar un agente de escucha a un elemento creado dinámicamente, es posible que deba usar lo siguiente para eliminarlo:

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

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

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

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

si configura la onclickvía htmlnecesitaremoveAttr ($(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'))

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

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

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

Mi solución alternativa:

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

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

Espero que ayude.

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>

Simplemente elimine eso del botón:

$('.classname').click(function(){
$( ".classname" ).remove();
});