JQueryで「onclick」を削除する方法?


99

PHPコード:

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

を削除しonclick="check($id,1)てリンクをクリックできないようにしたり、「check($id,1)を起動したりしません。JQueryでどうすればよいですか?

回答:


237

古い方法(1.7より前):

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

新しい方法(1.7以上):

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

(必要なセレクターに置き換えてください。)


26
それはremoveAttr( 'onclick')であるべきではありませんか?
Roatin Marth

ええ、良い点はもっときれいかもしれませんが、それが実行の観点と異なるかどうかはわかりません。
glmxndr 2009

6
jQueryを使って1.7以上、あなたがオン/オフ使用することができます。stackoverflow.com/questions/209029/...
ランスクリーブランド

6
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はい、それはドキュメントにありますが、.prop()IE11にも使用する必要がありました。
onetwo12 2014

58

私はこれがかなり古いことを知っていますが、失われた見知らぬ人が(私がしたように)答えを探すためにこの質問を見つけたとき、これはremoveAttr()を使用する代わりに、それを行う最善の方法です:

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

jQuerys公式ドクを引用:

「.removeAttr()を使用してインラインのonclickイベントハンドラーを削除しても、Internet Explorer 6、7、または8では望ましい効果が得られません。潜在的な問題を回避するには、代わりに.prop()を使用してください。」


1
これは、このように入力したときにonlickイベントを削除する最良の方法であることがわかりました。 <span onlick="method()">sometext>/span>イベントは完全にバインドされておらず、うまく機能しています
zdarsky.peter

3
これが最善の方法だとは思いません。jsfiddle.net/TN2wrjsfiddle.net/TN2wr/1
Gus

私は1.6より古いJQを使用しているため、$(element).attr( 'onclick'、null); 私のために働く。
metamagikum 2013年

18

onclickプロパティを削除しています

次のように、クリックイベントをインラインで追加したとします。

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

その後、次のようにイベントを削除できます。

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

clickイベントリスナーの削除

次のように、イベントリスナーを定義してクリックイベントを追加したとします。

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

...またはこのように:

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

その後、次のようにイベントを削除できます。

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

両方を削除する

イベントの追加方法がわからない場合は、次のように両方を組み合わせることができます。

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



5

bind、unbind、on、off、click、attr、removeAttr、propで一生懸命試した後、私はそれを機能させました。だから、私は次のシナリオを持っています:私のhtmlにはインラインのonclickハンドラーをアタッチしていません。

次に、Javascriptで次を使用してインラインのonclickハンドラーを追加します。

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

これを後でJavaScriptから削除するために、以下を使用しました。

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

これが、JavaScriptで動的にクリックイベントをバインドおよびバインド解除する方法でした。要素にインラインのonclickハンドラーを挿入しないでください。


私はこれが好きですが、なぜ1つは小道具でもう1つは属性なのでしょうか。
Stachu 2013

確かではありませんが、これを確認する方法は、attrを使用して、対応するmyFunction()でonclickハンドラーを追加/挿入し、prop( 'onclick'、null)が属性を削除するため、関数は呼び出されません。これが私にとってはうまくいきました。そして、要素がattrを介してonclickハンドラーを持っている方法と、propの後にどのように削除されたかに気づきました。
bboydflo 2013

1
将来の参考のために、あなたが本当に使用する必要があります.on('click', myFunction)(ノートmyFunctionない引用符で)をしてから、後で、.off('click')
JDBはまだモニカ覚え

1

onclickイベントが直接要素ではなく親要素から発生した場合はどうなりますか?これはうまくいくはずです:

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

別のクリックリスナーを追加すると(デフォルトを防止するためなど)、リスナーリストの最後に追加され、他のリスナーが最初に実行されます。それがリストの最初に追加されるのか、最後に追加されるのかはわかりません。とにかく、他の答えで見られるように「オフ」を使用する方が良いです。
Frederic Leitenberger

0

IDでonclickイベントをアンバインドする場合は、次のようにしてください。

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

クラスでonclickイベントのバインドを解除する場合は、次のようにしてください。

$('.className').attr('onclick','').unbind('click');
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.