Como remover “onclick” com JQuery?


99

Código PHP:

<a id="a$id" onclick="check($id,1)" href="javascript:void(0)"  class="black">Qualify</a>

Desejo remover o onclick="check($id,1)para que o link não possa ser clicado ou " check($id,1)não seja disparado. Como posso fazer isso com JQuery?

Respostas:


237

Old Way (pré-1.7):

$("...").attr("onclick", "").unbind("click");

Novo Caminho (1.7+):

$("...").prop("onclick", null).off("click");

(Substitua ... pelo seletor de que você precisa.)


26
Não deveria ser removeAttr ('onclick')?
Roatin Marth

Sim, bom ponto, pode ser mais limpo, mas não tenho certeza se seria diferente do ponto de vista da execução.
glmxndr

6
Com o jQuery 1.7+, você pode ligar / desligar: stackoverflow.com/questions/209029/…
Lance Cleveland

6
Veja o primeiro comentário em removeAttr api.jquery.com/removeattr Removing an inline onclick event handler using .removeAttr() doesn't achieve the desired effect in Internet Explorer 6, 7, or 8. To avoid potential problems, use .prop() instead
andyface

2
@andyface sim, isso está na documentação, mas eu tive que usar .prop()para o IE11 também.
onetwo12

58

Eu sei que isso é muito antigo, mas quando um estranho perdido encontra essa pergunta em busca de uma resposta (como eu fiz), então esta é a melhor maneira de fazer isso, em vez de usar removeAttr ():

$element.prop("onclick", null);

Citando o doku oficial do jQuerys :

"Remover um manipulador de eventos onclick embutido usando .removeAttr () não atinge o efeito desejado no Internet Explorer 6, 7 ou 8. Para evitar possíveis problemas, use .prop () em vez disso"


1
Descobri que esta é a melhor forma de remover um evento onlick quando você o digita assim. <span onlick="method()">sometext>/span>O evento é totalmente desvinculado e funciona muito bem
zdarsky.peter

3
Não acho que seja a melhor maneira. jsfiddle.net/TN2wr vs jsfiddle.net/TN2wr/1
Gus

Estou usando um JQ anterior a 1.6, portanto, $ (element) .attr ('onclick', null); funciona para mim.
metamagikum

18

Removendo onclickpropriedade

Suponha que você tenha adicionado seu evento de clique embutido, assim:

<button id="myButton" onclick="alert('test')">Married</button>

Então, você pode remover o evento assim:

$("#myButton").prop('onclick', null); // Removes 'onclick' property if found

Removendo clickouvintes de eventos

Suponha que você tenha adicionado seu evento de clique definindo um ouvinte de evento, como este:

$("button").on("click", function() { alert("clicked!"); });

... ou assim:

$("button").click(function() { alert("clicked!"); });

Então, você pode remover o evento assim:

$("#myButton").off('click');          // Removes other events if found

Removendo ambos

Se não tiver certeza de como seu evento foi adicionado, você pode combinar os dois, desta forma:

$("#myButton").prop('onclick', null)  // Removes 'onclick' property if found
              .off('click');          // Removes other events if found

17

se você estiver usando jquery 1.7

$('html').off('click');

outro

$('html').unbind('click');


5

Depois de tentar tanto com bind, unbind, on, off, click, attr, removeAttr, prop eu fiz funcionar. Portanto, tenho o seguinte cenário: No meu html, NÃO anexei nenhum manipulador onclick embutido.

Então, em meu Javascript, usei o seguinte para adicionar um manipulador onclick embutido:

$(element).attr('onclick','myFunction()');

Para remover isso mais tarde do Javascript, usei o seguinte:

$(element).prop('onclick',null);

Esta é a maneira que funcionou para mim vincular e desvincular eventos de clique dinamicamente em Javascript. Lembre-se de NÃO inserir nenhum manipulador onclick embutido em seus elementos.


Eu gosto disso, mas por que um seria prop e o outro attr?
Stachu de

Não tenho certeza, mas vejo isso é que com attr você adiciona / injeta o manipulador onclick com o myFunction () correspondente e o prop ('onclick', null) remove o atributo, então nenhuma função será chamada. É assim que funcionou para mim. E pude notar como o elemento tinha o manipulador onclick via attr e como ele era removido após o prop.
bboydflo

1
Para referência futura, você realmente deve usar .on('click', myFunction)(note que nãomyFunction está entre aspas) e, mais tarde,.off('click')
JDB ainda se lembra de Monica

1

E se o evento onclick não estiver diretamente no elemento, mas no elemento pai? Isso deve funcionar:

$(".noclick").attr('onclick','').unbind('click');
$(".noclick").click(function(e){
    e.preventDefault();
    e.stopPropagation();
    return false;
});

Adicionar outro ouvinte de clique (para evitar padrão, etc.) pode adicioná-lo ao final da lista de ouvintes e, portanto, os outros ouvintes ainda seriam executados primeiro. Não tenho certeza se é adicionado primeiro ou último à lista. De qualquer forma, é melhor usar 'off' como visto em outras respostas.
Frederic Leitenberger

0

Tente fazer isso se você desvincular o evento onclick por ID. Em seguida, use:

$('#youLinkID').attr('onclick','').unbind('click');

Tente fazer isso se você desvincular o evento onclick pela classe. Em seguida, use:

$('.className').attr('onclick','').unbind('click');
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.