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.