Cara terbaik untuk menghapus event handler di jQuery?

Saya punya input type="image". Ini bertindak seperti catatan sel di Microsoft Excel. Jika seseorang memasukkan nomor ke dalam kotak teks yang input-imagedipasangkan dengan ini, saya menyiapkan pengendali acara untuk input-image. Kemudian ketika pengguna mengklik image, mereka mendapatkan popup kecil untuk menambahkan beberapa catatan ke data.

Masalah saya adalah bahwa ketika pengguna memasukkan nol ke dalam kotak teks, saya harus menonaktifkan input-imagepengendali acara. Saya sudah mencoba yang berikut, tetapi tidak berhasil.

$('#myimage').click(function { return false; });

jQuery ≥ 1.7

Dengan jQuery 1.7 dan seterusnya, API peristiwa telah diperbarui, .bind()/ .unbind()masih tersedia untuk kompatibilitas mundur, tetapi metode yang disukai menggunakan fungsi on () / off () . Di bawah ini sekarang akan menjadi,

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

jQuery <1.7

Dalam kode contoh Anda, Anda cukup menambahkan acara klik lain ke gambar, bukan menimpa yang sebelumnya:

$('#myimage').click(function() { return false; }); // Adds another click event

Kedua acara klik kemudian akan dipecat.

Seperti yang dikatakan orang, Anda dapat menggunakan unbind untuk menghapus semua acara klik:

$('#myimage').unbind('click');

Jika Anda ingin menambahkan satu acara dan kemudian menghapusnya (tanpa menghapus acara lain yang mungkin telah ditambahkan) maka Anda dapat menggunakan penempatan nama acara:

$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });

dan untuk menghapus hanya acara Anda:

$('#myimage').unbind('click.mynamespace');

Ini tidak tersedia ketika pertanyaan ini dijawab, tetapi Anda juga dapat menggunakan metode live () untuk mengaktifkan / menonaktifkan acara.

$('#myimage:not(.disabled)').live('click', myclickevent);

$('#mydisablebutton').click( function () { $('#myimage').addClass('disabled'); });

Apa yang akan terjadi dengan kode ini adalah ketika Anda mengklik #mydisablebutton, itu akan menambah kelas yang dinonaktifkan pada elemen #myimage. Ini akan membuatnya sehingga pemilih tidak lagi cocok dengan elemen dan acara tidak akan dipecat sampai kelas 'dinonaktifkan' dihapus membuat pemilih .live () valid lagi.

Ini memiliki manfaat lain dengan menambahkan gaya berdasarkan kelas itu juga.

Jika Anda ingin menanggapi suatu peristiwa hanya satu kali , sintaks berikut ini akan sangat membantu:

 $('.myLink').bind('click', function() {
   //do some things

   $(this).unbind('click', arguments.callee); //unbind *just this handler*
 });

Menggunakan arguments.callee , kita dapat memastikan bahwa satu penangan fungsi anonim tertentu dihapus, dan dengan demikian, memiliki penangan waktu tunggal untuk peristiwa tertentu. Semoga ini bisa membantu orang lain.

Ini dapat dilakukan dengan menggunakan fungsi unbind.

$('#myimage').unbind('click');

Anda bisa menambahkan beberapa penangan acara ke objek dan acara yang sama di jquery. Ini berarti menambahkan yang baru tidak menggantikan yang lama.

Ada beberapa strategi untuk mengubah penangan acara, seperti ruang nama acara. Ada beberapa halaman tentang ini di dokumen online.

Lihatlah pertanyaan ini (begitulah cara saya belajar tentang ikatan). Ada beberapa deskripsi yang berguna dari strategi ini dalam jawaban.

Cara membaca fungsi callback hover terikat di jquery

mungkin metode yang tidak mengikat akan bekerja untuk Anda

$("#myimage").unbind("click");

Saya harus mengatur acara ke null menggunakan prop dan attr. Saya tidak bisa melakukannya dengan satu atau yang lain. Saya juga tidak bisa mendapatkan .unbind untuk bekerja. Saya sedang mengerjakan elemen TD.

.prop("onclick", null).attr("onclick", null)

Jika acara dilampirkan dengan cara ini , dan target tidak terikat:

$('#container').on('click','span',function(eo){
    alert(1);

    $(this).off(); //seams easy, but does not work

    $('#container').off('click','span'); //clears click event for every span

    $(this).on("click",function(){return false;}); //this works.

});​

Anda mungkin menambahkan onclickpenangan sebagai marka sebaris:

<input id="addreport" type="button" value="Add New Report" onclick="openAdd()" />

Jika demikian, jquery .off()atau .unbind()tidak akan berfungsi. Anda perlu menambahkan event handler asli di jquery juga:

$("#addreport").on("click", "", function (e) {
   openAdd();
});

Kemudian jquery memiliki referensi ke pengendali event dan dapat menghapusnya:

$("#addreport").off("click")

VoidKing menyebutkan ini sedikit lebih miring dalam komentar di atas.

Diperbarui untuk 2014

Menggunakan versi terbaru jQuery, Anda sekarang dapat melepaskan ikatan semua peristiwa di namespace hanya dengan melakukan $( "#foo" ).off( ".myNamespace" );

Cara terbaik untuk menghapus acara onclick inline adalah $(element).prop('onclick', null);

Bagi remove SEMUA event-handlers , inilah yang berhasil bagi saya:

Untuk menghapus semua penangan acara berarti memiliki dataran HTML structuretanpa semua yang event handlersmelekat pada elementdan child nodes. Untuk melakukan ini, jQuery's clone()membantu.

var original, clone;
// element with id my-div and its child nodes have some event-handlers
original = $('#my-div');
clone = original.clone();
//
original.replaceWith(clone);

Dengan ini, kita akan memiliki clonedi tempat originaltanpa event-handlersdi atasnya.

Semoga berhasil...

Terima kasih untuk informasi. sangat membantu saya menggunakannya untuk mengunci interaksi halaman saat dalam mode edit oleh pengguna lain. Saya menggunakannya bersamaan dengan ajaxComplete. Tidak perlu perilaku yang sama tetapi agak mirip.

function userPageLock(){
    $("body").bind("ajaxComplete.lockpage", function(){
        $("body").unbind("ajaxComplete.lockpage");
        executePageLock();      
    });
};  

function executePageLock(){
    //do something
}

.on()Metode dalam kasus sebelumnya digunakan dengan pemilih tertentu, seperti dalam contoh berikut:

$('body').on('click', '.dynamicTarget', function () {
    // Code goes here
});

Keduanya unbind()dan .off()metode tidak akan berhasil.

Namun, metode .undelegate () dapat digunakan untuk sepenuhnya menghapus handler dari acara untuk semua elemen yang cocok dengan pemilih saat ini:

$("body").undelegate(".dynamicTarget", "click")

Jika Anda menggunakan $(document).on()untuk menambahkan pendengar ke elemen yang dibuat secara dinamis maka Anda mungkin harus menggunakan yang berikut untuk menghapusnya:

// add the listener
$(document).on('click','.element',function(){
    // stuff
});

// remove the listener
$(document).off("click", ".element");

Ini juga berfungsi dengan baik. Sederhana dan mudah. ​​Lihat http://jsfiddle.net/uZc8w/570/

$('#myimage').removeAttr("click");

jika Anda mengatur onclickvia htmlAnda perluremoveAttr ($(this).removeAttr('onclick'))

jika Anda mengaturnya melalui jquery (seperti setelah klik pertama dalam contoh saya di atas) maka Anda perlu melakukannya unbind($(this).unbind('click'))

Saya tahu ini terlambat, tapi mengapa tidak menggunakan JS biasa untuk menghapus acara?

var myElement = document.getElementById("your_ID");
myElement.onclick = null;

atau, jika Anda menggunakan fungsi bernama sebagai pengendali event:

function eh(event){...}
var myElement = document.getElementById("your_ID");
myElement.addEventListener("click",eh); // add event handler
myElement.removeEventListener("click",eh); //remove it

Semua pendekatan yang dijelaskan tidak bekerja untuk saya karena saya menambahkan acara klik on()ke dokumen tempat elemen dibuat saat run-time:

$(document).on("click", ".button", function() {
    doSomething();
});

Solusi saya:

Karena saya tidak dapat melepaskan ikatan kelas ".button", saya hanya menetapkan kelas lain pada tombol yang memiliki gaya CSS yang sama. Dengan melakukan hal itu, live / on-event-handler akhirnya mengabaikan klik:

// prevent another click on the button by assigning another class
$(".button").attr("class","buttonOff");

Semoga itu bisa membantu.

Semoga kode saya di bawah ini menjelaskan semuanya. HTML:

(function($){

     $("#btn_add").on("click",function(){
       $("#btn_click").on("click",added_handler);
       alert("Added new handler to button 1");
     });

  
 
     $("#btn_remove").on("click",function(){
       $("#btn_click").off("click",added_handler);
       alert("Removed new handler to button 1");
     });

  
   function fixed_handler(){
    alert("Fixed handler");
  }
  
   function added_handler(){
    alert("new handler");
  }
  
  $("#btn_click").on("click",fixed_handler);
  $("#btn_fixed").on("click",fixed_handler);
  
  
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_click">Button 1</button>
  <button id="btn_add">Add Handler</button>
  <button id="btn_remove">Remove Handler</button>
  <button id="btn_fixed">Fixed Handler</button>

Cukup hapus saja dari tombol:

$('.classname').click(function(){
$( ".classname" ).remove();
});