Melhor maneira de remover um manipulador de eventos em jQuery?

Question

Eu tenho um input type="image". Isto age como as notas de células em Microsoft Excel. Se alguém entra um número na caixa de texto que este input-image está emparelhado com, configuração I um manipulador de eventos para o input-image. Então, quando o usuário clica no image, eles ficam um pouco de contexto para adicionar algumas notas para os dados.

Meu problema é que quando um usuário digita um zero na caixa de texto, eu preciso desativar manipulador de eventos do input-image. Eu tentei o seguinte, mas sem sucesso.

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

Answer 1

jQuery = 1,7

Com jQuery 1.7 em diante a API evento foi atualizado, .bind() / .unbind() ainda estão disponíveis para compatibilidade com versões anteriores, mas o método preferido é usar o on () / off () funções. A seguir seria agora,

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

Em seu código exemplo, você está simplesmente adicionando um outro evento clique para a imagem, não substituindo o anterior:

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

Ambos os eventos de clique, então, ser demitido.

Como as pessoas têm dito que você pode usar unbind para remover todos os eventos de clique:

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

Se você quiser adicionar um único evento e, em seguida, removê-lo (sem remover quaisquer outros que possam ter sido adicionadas), então você pode usar namespacing evento:

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

e remover apenas o seu evento:

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

Answer 2

Isto não estava disponível quando esta pergunta foi respondida, mas você também pode usar o ao vivo () método para ativar / desativar eventos.

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

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

O que vai acontecer com este código é que quando você clica #mydisablebutton, ele irá adicionar a classe desativada ao elemento #myimage. Isso vai fazer com que o selector não corresponde ao elemento eo evento não será acionado até que a classe 'deficientes' é removido fazendo o seletor .Live () válido novamente.

Este tem outros benefícios adicionando Styling com base nessa classe também.

Answer 3

Isto pode ser feito usando a função unbind.

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

Você pode adicionar vários manipuladores de eventos para o mesmo objeto e evento em jQuery. Será que isso significa adicionar uma nova pessoa não substituir os antigos.

Existem várias estratégias para alterar os manipuladores de eventos, tais como namespaces evento. Há algumas páginas sobre isso no docs on-line.

Olhe para esta questão (que é como eu aprendi de unbind). Há alguma descrição útil dessas estratégias nas respostas.

Como ler funções pairar callback encadernados em jQuery

Answer 4

Se você quiser responder a um evento apenas uma vez , a seguinte sintaxe deve ser realmente útil:

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

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

Usando arguments.callee , podemos garantir que o manipulador de-função anônima um específico é removido, e, assim, ter um manipulador de tempo único para um determinado evento. Espero que isso ajude os outros.

Answer 5

talvez o método unbind irá trabalhar para você

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

Answer 6

Eu tinha que definir o evento como nulo usando o prop ea attr. Eu não poderia fazê-lo com um ou o outro. Eu também não conseguia .unbind ao trabalho. Eu estou trabalhando em um elemento TD.

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

Answer 7

Se o evento está ligado Desta forma , eo alvo é ser desapegado:

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

Você pode estar adicionando o manipulador onclick como marcação em linha:

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

Se assim for, o .off() jquery ou .unbind() não vai funcionar. Você precisa adicionar o manipulador de evento original em jQuery assim:

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

Então, o jQuery tem uma referência para o manipulador de eventos e pode removê-lo:

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

VoidKing menciona isso um pouco mais obliquamente em um comentário anterior.

Answer 9

Atualizado para 2014

Usando a última versão do jQuery, você agora é capaz de desvincular todos os eventos em um namespace simplesmente fazendo $( "#foo" ).off( ".myNamespace" );

Answer 10

A melhor maneira de remover evento em linha onclick é $(element).prop('onclick', null);

Answer 11

Obrigado pela informação. muito útil que eu usei para bloquear a interação página enquanto no modo de edição por outro usuário. Eu usei-lo em conjunto com ajaxComplete. Não necesarily o mesmo comportamento, mas um pouco semelhante.

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

function executePageLock(){
    //do something
}

Answer 12

No método .on() caso foi anteriormente utilizado com selector particular, como no exemplo a seguir:

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

Ambos os unbind() e .off() métodos não indo para o trabalho.

No entanto, .undelegate () método poderia ser usado para remover completamente o manipulador do evento para todos elementos que combinam com o seletor de corrente:

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

Answer 13

Para remove ALL event-handlers, isto é o que funcionou para mim:

Para remover todos os manipuladores de eventos significa ter o HTML structure simples, sem toda a event handlers anexado ao element e sua child nodes. Para fazer isso, jQuery's clone() ajudou.

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

Com isso, teremos a clone no lugar do original sem event-handlers nele.

Boa sorte ...

Answer 14

Isso também funciona bem .Simple e easy.see http://jsfiddle.net/uZc8w/570/

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

Answer 15

Se você definir o onclick via html você precisa removeAttr ($(this).removeAttr('onclick'))

Se você configurá-lo via jQuery (como a após o primeiro clique em meus exemplos acima), então você precisa unbind($(this).unbind('click'))

Answer 16

Todas as abordagens descrito não funcionou para mim, porque eu estava adicionando o evento clique com on() para o documento onde o elemento foi criado em tempo de execução:

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

Minha solução:

Como eu não podia unbind a classe ".button" Eu só atribuído outra classe para o botão que tinha os mesmos estilos CSS. Ao fazer isso o / live on-manipulador de eventos ignorado o clique finalmente:

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

Espero que ajude.

Answer 17

Hope meu código abaixo explica tudo. 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

Eu sei que isto vem no final, mas por que não usar JS simples para remover o evento?

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

ou, se você usar uma função chamada como um manipulador 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

Se você usar $(document).on() para adicionar um ouvinte para um elemento criados dinamicamente, então você pode ter que usar o seguinte para removê-lo:

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

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