Bagaimana cara menghapus "onclick" dengan JQuery?


100

Kode PHP:

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

Saya ingin menghapus onclick="check($id,1)agar tautan tidak dapat diklik atau " check($id,1)tidak akan diaktifkan. Bagaimana cara melakukannya dengan JQuery?

Jawaban:


238

Cara Lama (sebelum 1.7):

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

Cara Baru (1.7+):

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

(Ganti ... dengan selektor yang Anda butuhkan.)


26
Bukankah itu seharusnya removeAttr ('onclick')?
Roatin Marth

Ya, poin yang bagus, mungkin lebih bersih, tapi saya tidak yakin itu akan berbeda dari sudut pandang eksekusi.
glmxndr

6
Dengan jQuery 1.7+ Anda dapat menggunakan on / off: stackoverflow.com/questions/209029/…
Lance Cleveland

6
Lihat komentar pertama di 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 ya itu ada di dokumentasi, tapi saya harus menggunakan .prop()IE11 juga.
onetwo12

58

Saya tahu ini sudah cukup lama, tetapi ketika orang asing yang tersesat menemukan pertanyaan ini mencari jawaban (seperti yang saya lakukan) maka ini adalah cara terbaik untuk melakukannya, daripada menggunakan removeAttr ():

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

Mengutip doku resmi jQuerys :

"Menghapus penangan kejadian onclick sebaris menggunakan .removeAttr () tidak mencapai efek yang diinginkan di Internet Explorer 6, 7, atau 8. Untuk menghindari potensi masalah, gunakan .prop () sebagai gantinya"


1
Saya menemukan bahwa ini adalah cara terbaik untuk menghapus acara klik ketika Anda mengetiknya seperti ini. <span onlick="method()">sometext>/span>Acara ini sepenuhnya tidak terikat dan berfungsi dengan baik
zdarsky.peter

3
Saya rasa ini bukan cara terbaik. jsfiddle.net/TN2wr vs jsfiddle.net/TN2wr/1
Gus

Saya menggunakan JQ yang lebih tua dari 1.6 oleh karena itu $ (element) .attr ('onclick', null); bekerja untuk saya.
metamagikum

18

Menghapus onclickproperti

Misalkan Anda menambahkan peristiwa klik Anda sebaris, seperti ini:

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

Kemudian, Anda dapat menghapus acara seperti ini:

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

Menghapus clickpendengar acara

Misalkan Anda menambahkan peristiwa klik dengan mendefinisikan pendengar peristiwa, seperti ini:

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

... atau seperti ini:

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

Kemudian, Anda dapat menghapus acara seperti ini:

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

Menghapus keduanya

Jika Anda tidak yakin bagaimana acara Anda ditambahkan, Anda dapat menggabungkan keduanya, seperti ini:

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

17

jika Anda menggunakan jquery 1.7

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

lain

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


5

Setelah berusaha keras dengan bind, unbind, on, off, click, attr, removeAttr, prop, saya berhasil. Jadi, saya memiliki skenario berikut: Dalam html saya, saya TIDAK memasang penangan onclick inline.

Kemudian di Javascript saya, saya menggunakan yang berikut ini untuk menambahkan handler onclick sebaris:

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

Untuk menghapus ini di kemudian hari dari Javascript saya menggunakan yang berikut ini:

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

Ini adalah cara saya bekerja untuk mengikat dan melepaskan peristiwa klik secara dinamis di Javascript. Ingatlah untuk TIDAK memasukkan handler onclick sebaris apa pun ke dalam elemen Anda.


Saya suka ini, tapi mengapa yang satu menjadi prop dan yang lainnya attr?
Stachu

Saya tidak yakin, tetapi cara saya melihat ini adalah bahwa dengan attr Anda menambahkan / menyuntikkan onclick handler dengan myFunction () yang sesuai dan prop ('onclick', null) menghapus atribut, jadi tidak ada fungsi yang akan dipanggil. Ini adalah cara kerjanya bagi saya. Dan saya bisa melihat bagaimana elemen memiliki onclick handler melalui attr dan bagaimana itu dihapus setelah prop.
bboydflo

1
Untuk referensi di masa mendatang, Anda harus benar-benar menggunakan .on('click', myFunction)(catatan bahwa myFunctionini bukan dalam tanda kutip) lalu, kemudian,.off('click')
JDB masih ingat Monica

1

Bagaimana jika event onclick tidak langsung pada elemen, tetapi dari elemen induk? Ini harus bekerja:

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

Menambahkan pemroses klik lain (untuk mencegah default, dll.) Mungkin menambahkannya ke akhir daftar pemroses dan dengan demikian pemroses lainnya masih akan dieksekusi terlebih dahulu. Saya tidak yakin apakah itu ditambahkan pertama atau terakhir ke daftar. Bagaimanapun, lebih baik menggunakan 'off' seperti yang terlihat pada jawaban lain.
Frederic Leitenberger

0

Coba ini jika Anda melepaskan acara onclick dengan ID Kemudian gunakan:

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

Coba ini jika Anda melepaskan acara onclick menurut Kelas Kemudian gunakan:

$('.className').attr('onclick','').unbind('click');
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.