html-input Melhor maneira de remover um manipulador de eventos no jQuery?



9 Answers

Isso não estava disponível quando essa 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 no #mydisablebutton, ele adicionará a classe desativada ao elemento #myimage. Isso fará com que o seletor não mais corresponda ao elemento e o evento não seja disparado até que a classe 'disabled' seja removida, tornando o seletor .live () válido novamente.

Isso tem outros benefícios, adicionando estilo baseado nessa classe também.

jquery html-input

Eu tenho um input type="image" . Isso funciona como as notas de célula no Microsoft Excel. Se alguém inserir um número na caixa de texto com a qual esta input-image é emparelhada, configurarei um manipulador de eventos para a input-image . Então, quando o usuário clica na image , ela recebe um pequeno pop-up para adicionar algumas notas aos dados.

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

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



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 específico seja removido e, portanto, tenha um único manipulador de tempo para um determinado evento. Espero que isso ajude os outros.




Eu tive que definir o evento para null usando o prop e o attr. Eu não poderia fazer isso com um ou outro. Eu também não conseguia me livrar do trabalho. Eu estou trabalhando em um elemento TD.

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



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

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

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

$("#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 em um comentário acima.




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




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

Remover todos os manipuladores de eventos significa ter a HTML structure simples sem todos os event handlers anexados ao element e seus 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 clone no lugar do original sem nenhum event-handlers .

Boa sorte...




Caso o método .on() tenha sido usado anteriormente com determinado seletor, como no exemplo a seguir:

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

Ambos os métodos .off() unbind() e .off() não irão funcionar.

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



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>




Todas as abordagens descritas não funcionaram para mim porque eu estava adicionando o evento click com 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 consegui desvincular a classe ".button" acabei de atribuir outra classe ao botão que tinha os mesmos estilos CSS. Ao fazer isso, o manipulador live / on-event ignorou o clique finalmente:

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

Espero que ajude.






Related