Comment supprimer «onclick» avec JQuery?


100

Code PHP:

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

Je veux supprimer le onclick="check($id,1)afin que le lien ne puisse pas être cliqué ou " check($id,1)ne sera pas déclenché. Comment puis-je le faire avec JQuery?

Réponses:


238

Old Way (pré-1.7):

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

Nouvelle façon (1.7+):

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

(Remplacez ... par le sélecteur dont vous avez besoin.)


26
Cela ne devrait-il pas être removeAttr ('onclick')?
Roatin Marth

Oui, bon point, cela pourrait être plus propre, mais je ne suis pas sûr que ce serait différent du point de vue de l'exécution.
glmxndr

6
Avec jQuery 1.7+, vous pouvez utiliser on / off: stackoverflow.com/questions/209029/…
Lance Cleveland

6
Voir le premier commentaire sur 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 oui c'est dans la documentation, mais je .prop()devais aussi utiliser pour IE11.
onetwo12

58

Je sais que c'est assez ancien, mais lorsqu'un inconnu perdu trouve cette question à la recherche d'une réponse (comme je l'ai fait), c'est la meilleure façon de le faire, au lieu d'utiliser removeAttr ():

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

Citant le doku officiel de jQuerys :

«La suppression d'un gestionnaire d'événements onclick en ligne à l'aide de .removeAttr () n'obtient pas l'effet souhaité dans Internet Explorer 6, 7 ou 8. Pour éviter les problèmes potentiels, utilisez plutôt .prop ()»


1
J'ai trouvé que c'est la meilleure façon de supprimer l'événement onlick lorsque vous l'avez tapé comme ça. <span onlick="method()">sometext>/span>L'événement est entièrement non lié et fonctionne très bien
zdarsky.peter

3
Je ne pense pas que ce soit la meilleure façon. jsfiddle.net/TN2wr vs jsfiddle.net/TN2wr/1
Gus

J'utilise un JQ plus ancien que 1.6 donc $ (element) .attr ('onclick', null); travaille pour moi.
metamagikum

18

Suppression onclick propriété

Supposons que vous ayez ajouté votre événement de clic en ligne, comme ceci:

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

Ensuite, vous pouvez supprimer l'événement comme ceci:

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

Suppression des clickécouteurs d'événements

Supposons que vous ayez ajouté votre événement de clic en définissant un écouteur d'événements, comme ceci:

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

... ou comme ça:

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

Ensuite, vous pouvez supprimer l'événement comme ceci:

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

Suppression des deux

Si vous ne savez pas comment votre événement a été ajouté, vous pouvez combiner les deux, comme ceci:

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

17

si vous utilisez jquery 1.7

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

autre

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


5

Après avoir essayé si dur avec bind, unbind, on, off, click, attr, removeAttr, prop, je l'ai fait fonctionner. Donc, j'ai le scénario suivant: Dans mon html, je n'ai pas attaché de gestionnaires onclick en ligne.

Ensuite, dans mon Javascript, j'ai utilisé ce qui suit pour ajouter un gestionnaire onclick en ligne:

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

Pour supprimer cela ultérieurement de Javascript, j'ai utilisé ce qui suit:

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

C'est ainsi que cela fonctionnait pour moi de lier et de dissocier des événements de clic de manière dynamique en Javascript. N'oubliez pas de ne PAS insérer de gestionnaire onclick en ligne dans vos éléments.


J'aime ça, mais pourquoi l'un serait-il accessoire et l'autre attr?
Stachu

Je ne suis pas sûr, mais la façon dont je vois les choses est qu'avec attr, vous ajoutez / injectez le gestionnaire onclick avec le myFunction () correspondant et le prop ('onclick', null) supprime l'attribut, donc aucune fonction ne sera appelée. C'est ainsi que cela a fonctionné pour moi. Et j'ai pu remarquer comment l'élément avait le gestionnaire onclick via attr et comment il a été supprimé après prop.
bboydflo

1
Pour référence future, vous devriez vraiment utiliser .on('click', myFunction)(notez que ce myFunctionn'est pas entre guillemets) et ensuite, plus tard,.off('click')
JDB se souvient toujours de Monica

1

Et si l'événement onclick n'est pas directement sur l'élément, mais depuis l'élément parent? Cela devrait fonctionner:

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

L'ajout d'un autre écouteur de clic (pour empêcher la valeur par défaut, etc.) pourrait l'ajouter à la fin de la liste d'écouteurs et ainsi les autres écouteurs seraient toujours exécutés en premier. Je ne sais pas s'il est ajouté en premier ou en dernier à la liste. Quoi qu'il en soit, il est préférable d'utiliser «off» comme on le voit dans d'autres réponses.
Frederic Leitenberger le

0

Essayez ceci si vous dissociez l'événement onclick par ID, puis utilisez:

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

Essayez ceci si vous dissociez l'événement onclick par classe, puis utilisez:

$('.className').attr('onclick','').unbind('click');
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.