Melhor maneira de remover um manipulador de eventos no jQuery?

Eu tenho um input type="image". Isso age como as anotações da célula no Microsoft Excel. Se alguém digitar um número na caixa de texto com a qual ele input-imageestá emparelhado, eu configurarei um manipulador de eventos para o input-image. Então, quando o usuário clica no botão image, ele exibe um pequeno pop-up para adicionar algumas notas aos dados.

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

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

jQuery ≥ 1,7

Com o jQuery 1.7 em diante, a API do evento foi atualizada, .bind()/ .unbind()ainda está disponível para compatibilidade com versões anteriores, mas o método preferido é usar as funções on () / off () . O abaixo 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

No seu código de exemplo, você está simplesmente adicionando outro evento de clique à imagem, não substituindo o anterior:

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

Os dois eventos de clique serão acionados.

Como as pessoas disseram, você pode usar o unbind para remover todos os eventos de clique:

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

Se você deseja adicionar um único evento e removê-lo (sem remover nenhum outro que possa ter sido adicionado), use o espaço para nome do evento:

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

e para remover apenas o seu evento:

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

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

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

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

O que acontecerá com esse código é que, quando você clicar em #mydisablebutton, ele adicionará a classe desativada ao elemento #myimage. Isso fará com que o seletor não corresponda mais ao elemento e o evento não seja acionado até que a classe 'disabled' seja removida, tornando o seletor .live () válido novamente.

Isso tem outros benefícios ao adicionar estilos baseados nessa classe também.

Se você deseja 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 argument.callee , podemos garantir que um único manipulador de função anônima específico seja removido e, portanto, tenha um único manipulador de tempo para um determinado evento. Espero que isso ajude os outros.

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

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

Você pode adicionar vários manipuladores de eventos ao mesmo objeto e evento no jquery. Isso significa que adicionar um novo não substitui os antigos.

Existem várias estratégias para alterar manipuladores de eventos, como namespaces de eventos. Existem algumas páginas sobre isso nos documentos on-line.

Olhe para esta pergunta (foi assim que aprendi a desatar). Há alguma descrição útil dessas estratégias nas respostas.

Como ler as funções de retorno de chamada em foco suspenso no jquery

talvez o método unbind funcione para você

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

Eu tive que definir o evento como nulo usando o prop e o attr. Eu não poderia fazer isso com um ou outro. Também não consegui .unbind para o trabalho. Estou trabalhando em um elemento TD.

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

Se o evento for anexado dessa maneira , e o destino deve ser desanexado:

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

});​

Você pode adicionar o onclickmanipulador como marcação embutida:

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

Se sim, o jquery .off()ou .unbind()não funcionará. Você também precisa adicionar o manipulador de eventos original no jquery:

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

Em seguida, o jquery tem uma referência ao manipulador de eventos e pode removê-lo:

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

O VoidKing menciona isso um pouco mais obliquamente no comentário acima.

Atualizado para 2014

Usando a versão mais recente do jQuery, agora você pode desvincular todos os eventos em um espaço para nome simplesmente executando $( "#foo" ).off( ".myNamespace" );

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

Para remove TODOS event-handlers , é isso que funcionou para mim:

Remover todos os manipuladores de eventos significa ter a planície HTML structuresem todos os event handlersanexados ao elemente ao 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 o clonelugar do originalsem event-handlersnele.

Boa sorte...

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

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

function executePageLock(){
    //do something
}

No caso, o .on()método foi usado anteriormente com um seletor específico, como no exemplo a seguir:

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

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

No entanto, o método .undelegate () pode ser usado para remover completamente o manipulador do evento para todos os elementos que correspondem ao seletor atual:

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

Se você $(document).on()adicionar um ouvinte a um elemento criado dinamicamente, poderá ser necessário o seguinte para removê-lo:

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

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

Isso também funciona bem. Simples e fácil. Consulte http://jsfiddle.net/uZc8w/570/

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

se você definir a onclickviahtml precisaráremoveAttr ($(this).removeAttr('onclick'))

se você configurá-lo via jquery (como após o primeiro clique nos meus exemplos acima), será necessário unbind($(this).unbind('click'))

Eu sei que isso chega tarde, 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 nomeada como 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

Todas as abordagens descritas não funcionaram para mim porque eu estava adicionando o evento click on()ao documento em que o elemento foi criado em tempo de execução:

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

Minha solução alternativa:

Como não pude desvendar a classe ".button", acabei de atribuir outra classe ao botão que tinha os mesmos estilos CSS. Ao fazer isso, o manipulador ao vivo / no evento ignorou o clique finalmente:

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

Espero que ajude.

Espero que meu código abaixo explique 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>

Simplesmente remova isso do botão:

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