วิธีที่ดีที่สุดในการลบตัวจัดการเหตุการณ์ใน jQuery?

input type="image"ฉันมี สิ่งนี้ทำหน้าที่เหมือนกับบันทึกย่อของเซลล์ใน Microsoft Excel ถ้ามีคนเข้ามาตัวเลขลงในกล่องข้อความที่ว่านี้อยู่คู่กับการติดตั้งผมดำเนินกิจกรรมสำหรับinput-image input-imageจากนั้นเมื่อผู้ใช้คลิกที่imageพวกเขาจะได้รับป๊อปอัพเล็กน้อยเพื่อเพิ่มบันทึกลงในข้อมูล

ปัญหาของฉันคือเมื่อผู้ใช้ป้อนค่าศูนย์ลงในกล่องข้อความฉันต้องปิดการใช้งานinput-imageตัวจัดการเหตุการณ์ ฉันได้ลองสิ่งต่อไปนี้แล้ว แต่ก็ไม่มีประโยชน์

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

jQuery ≥ 1.7

กับ jQuery 1.7 เป็นต้นไปเหตุการณ์ API ที่ได้รับการปรับปรุง.bind()/ .unbind()ยังคงมีอยู่สำหรับการทำงานร่วมกันหลัง แต่วิธีการที่ต้องการคือการใช้ใน () / ปิด ()ฟังก์ชั่น ด้านล่างจะเป็น

$('#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

ในโค้ดตัวอย่างของคุณคุณเพียงแค่เพิ่มเหตุการณ์การคลิกอีกครั้งลงในภาพไม่ใช่การแทนที่เหตุการณ์ก่อนหน้า:

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

เหตุการณ์การคลิกทั้งสองจะถูกไล่ออก

อย่างที่คนอื่นพูดไว้คุณสามารถใช้ unbind เพื่อลบกิจกรรมคลิกทั้งหมด:

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

หากคุณต้องการเพิ่มเหตุการณ์เดียวแล้วลบออก (โดยไม่ลบกิจกรรมอื่น ๆ ที่อาจถูกเพิ่ม) จากนั้นคุณสามารถใช้การกำหนดเนมสเปซได้:

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

และเพื่อลบเฉพาะกิจกรรมของคุณ:

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

สิ่งนี้ไม่สามารถใช้ได้เมื่อตอบคำถามนี้ แต่คุณยังสามารถใช้วิธีlive ()เพื่อเปิด / ปิดการใช้งานกิจกรรมได้

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

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

สิ่งที่จะเกิดขึ้นกับรหัสนี้คือเมื่อคุณคลิก #mydisablebutton มันจะเพิ่มคลาสที่ปิดใช้งานองค์ประกอบ #myimage สิ่งนี้จะทำให้มันเพื่อให้ตัวเลือกไม่ตรงกับองค์ประกอบและเหตุการณ์จะไม่ถูกไล่ออกจนกว่าคลาส 'ปิดการใช้งาน' จะถูกลบออกทำให้ตัวเลือก. live () ใช้ได้อีกครั้ง

สิ่งนี้มีประโยชน์อื่น ๆ โดยการเพิ่มสไตล์ตามคลาสนั้นด้วย

หากคุณต้องการตอบกลับเหตุการณ์เพียงครั้งเดียวไวยากรณ์ต่อไปนี้ควรเป็นประโยชน์จริง ๆ :

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

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

การใช้arguments.calleeเราสามารถตรวจสอบให้แน่ใจว่าตัวจัดการแบบไม่ระบุชื่อฟังก์ชั่นเฉพาะหนึ่งตัวถูกลบออกดังนั้นจึงมีตัวจัดการเวลาเดียวสำหรับเหตุการณ์ที่กำหนด หวังว่านี่จะช่วยผู้อื่น

สิ่งนี้สามารถทำได้โดยใช้ฟังก์ชัน unbind

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

คุณสามารถเพิ่มตัวจัดการเหตุการณ์หลายตัวให้กับวัตถุและเหตุการณ์เดียวกันด้วย jquery หมายความว่าการเพิ่มอันใหม่ไม่ได้เป็นการแทนที่อันใหม่

มีกลยุทธ์หลายอย่างสำหรับการเปลี่ยนตัวจัดการเหตุการณ์เช่นเนมสเปซเหตุการณ์ มีบางหน้าเกี่ยวกับเรื่องนี้ในเอกสารออนไลน์

ดูคำถามนี้ (นั่นเป็นวิธีที่ฉันเรียนรู้ที่จะผูกมัด) มีคำอธิบายที่เป็นประโยชน์ของกลยุทธ์เหล่านี้ในคำตอบ

วิธีการอ่านฟังก์ชั่นโฮเวอร์โทรกลับที่ถูกผูกไว้ใน jquery

บางทีวิธีการ unbind อาจใช้ได้ผลกับคุณ

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

ฉันต้องตั้งค่าเหตุการณ์เป็นโมฆะโดยใช้เสาและ attr ฉันไม่สามารถทำได้ด้วยอย่างใดอย่างหนึ่ง ฉันยังไม่ได้รับ. ผูกการทำงาน ฉันกำลังทำงานกับองค์ประกอบ TD

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

หากมีการแนบเหตุการณ์ด้วยวิธีนี้และเป้าหมายต้องไม่เชื่อมต่อ:

$('#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.

});​

คุณอาจเพิ่มonclickตัวจัดการเป็นมาร์กอัปแบบอินไลน์:

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

ถ้าเป็นเช่นนั้น jquery .off()หรือ.unbind()จะไม่ทำงาน คุณต้องเพิ่มตัวจัดการเหตุการณ์ดั้งเดิมใน jquery ด้วย:

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

จากนั้น jquery มีการอ้างอิงไปยังตัวจัดการเหตุการณ์และสามารถลบได้:

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

VoidKing กล่าวถึงสิ่งนี้อีกเล็กน้อยในความคิดเห็นด้านบน

อัปเดตสำหรับปี 2014

เมื่อใช้ jQuery เวอร์ชันล่าสุดตอนนี้คุณสามารถยกเลิกการผูกเหตุการณ์ทั้งหมดในเนมสเปซได้ง่ายๆ $( "#foo" ).off( ".myNamespace" );

วิธีที่ดีที่สุดในการลบเหตุการณ์แบบอินไลน์คือ $(element).prop('onclick', null);

สำหรับremove ทุก event-handlersคนนี่คือสิ่งที่ได้ผลสำหรับฉัน:

ลบกิจกรรมทั้งหมดขนย้ายหมายถึงการที่จะมีที่ราบHTML structureโดยไม่ต้องทั้งหมดevent handlersที่แนบมากับและelement child nodesเมื่อต้องการทำเช่นนี้jQuery's clone()ช่วย

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);

ด้วยสิ่งนี้เราจะมีการcloneแทนที่originalด้วยไม่มีevent-handlersใน

โชคดี...

ขอบคุณสำหรับข้อมูล. มีประโยชน์มากฉันใช้เพื่อล็อคการโต้ตอบหน้าเว็บในขณะที่อยู่ในโหมดแก้ไขโดยผู้ใช้รายอื่น ฉันใช้มันร่วมกับ ajaxComplete ไม่จำเป็นต้องมีพฤติกรรมเดียวกัน แต่ค่อนข้างคล้ายกัน

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

function executePageLock(){
    //do something
}

ในกรณีที่มี.on()การใช้วิธีการก่อนหน้านี้กับตัวเลือกเฉพาะเช่นในตัวอย่างต่อไปนี้:

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

ทั้งสองunbind()และ.off()วิธีการจะไม่ทำงาน

อย่างไรก็ตามสามารถใช้วิธี . undelegate ()เพื่อลบตัวจัดการออกจากเหตุการณ์สำหรับองค์ประกอบทั้งหมดที่ตรงกับตัวเลือกปัจจุบัน:

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

หากคุณใช้$(document).on()เพื่อเพิ่มผู้ฟังไปยังองค์ประกอบที่สร้างขึ้นแบบไดนามิกคุณอาจต้องใช้สิ่งต่อไปนี้เพื่อลบออก:

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

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

นอกจากนี้ยังใช้งานได้ดี. Simple และ easy.see http://jsfiddle.net/uZc8w/570/

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

หากคุณตั้งค่าonclickผ่านที่htmlคุณต้องการremoveAttr ($(this).removeAttr('onclick'))

หากคุณตั้งค่าผ่าน jquery (หลังจากคลิกครั้งแรกในตัวอย่างของฉันด้านบน) จากนั้นคุณต้อง unbind($(this).unbind('click'))

ฉันรู้ว่าสิ่งนี้มาถึงช้า แต่ทำไมไม่ใช้ JS ธรรมดาเพื่อลบกิจกรรม

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

หรือถ้าคุณใช้ฟังก์ชั่นที่มีชื่อเป็นตัวจัดการเหตุการณ์:

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

วิธีการทั้งหมดที่อธิบายไม่สามารถใช้งานได้สำหรับฉันเพราะฉันเพิ่มเหตุการณ์การคลิกon()ไปยังเอกสารที่มีการสร้างองค์ประกอบในเวลาทำงาน:

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

วิธีแก้ปัญหาของฉัน:

เนื่องจากฉันไม่สามารถแยกคลาส ".button" ฉันเพิ่งกำหนดคลาสอื่นให้กับปุ่มที่มีสไตล์ CSS เดียวกัน ด้วยการทำเช่นนั้น live / on-event-handler จะไม่สนใจการคลิกในที่สุด

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

หวังว่าจะช่วย

หวังว่ารหัสด้านล่างของฉันจะอธิบายทั้งหมด 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>

เพียงแค่ลบออกจากปุ่ม:

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