JQuery में ईवेंट हैंडलर निकालने का सबसे अच्छा तरीका?

Question

मेरे पास ए input type="image"। यह Microsoft Excel में सेल नोट्स की तरह कार्य करता है। यदि कोई व्यक्ति उस टेक्स्ट बॉक्स में एक नंबर दर्ज करता है जिसे इसके input-imageसाथ जोड़ा जाता है, तो मैं इसके लिए एक इवेंट हैंडलर सेटअप करता हूं input-image। फिर जब उपयोगकर्ता क्लिक करता है image, तो उन्हें डेटा में कुछ नोट्स जोड़ने के लिए थोड़ा पॉपअप मिलता है।

मेरी समस्या यह है कि जब उपयोगकर्ता पाठ बॉक्स में एक शून्य में प्रवेश करता है, तो मुझे input-imageईवेंट हैंडलर को अक्षम करना होगा । मैंने निम्नलिखित कोशिश की है, लेकिन कोई फायदा नहीं हुआ।

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

Answer 1

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

Comments

क्या unbind()काम करने के लिए परीक्षण करने का कोई तरीका है? मैंने इसे जोड़ दिया है और दोनों घटनाएं अभी भी गोलीबारी कर रही हैं।

— डेविड येल

खैर अगर दोनों घटनाओं में अभी भी गोलीबारी हो रही है तो जाहिर है कि यह काम नहीं कर रहा है। उचित जवाब पाने के लिए आपको अधिक जानकारी देनी होगी। एक अलग सवाल पूछने की कोशिश करें।

— 14

पुराने उत्तर -साथ ही शामिल नामस्थान जानकारी जैसे- लेकिन मैं भूल जाता हूं; पर / बंद jQ वस्तु वापस करता है? यदि हां, तो शायद एक और अधिक पूर्ण उत्तर डेज़ी श्रृंखला के लिए होगा:$('#myimage').off('click').on('click',function(){...})

— vol7ron

हां, वे ऐसा करते हैं, हां, यदि आप अन्य सभी क्लिक घटनाओं को साफ़ करना चाहते हैं और फिर अपना स्वयं का जोड़ना चाहते हैं तो आप उपरोक्त जंजीर कॉल कर सकते हैं।

— १५:३३ बजे

उपयोग .unbind()करने से मुझे ऐसी स्थिति में मदद मिली जहां मैं चेकबॉक्स का एक गुच्छा टॉगल कर रहा था, लेकिन मुझे लगता है कि मैं .click()हैंडलर को बार-बार जोड़ रहा था , जिससे ऐप लटका हुआ था।

— टेकब्रैट

Answer 2

यह प्रश्न उपलब्ध होने पर उपलब्ध नहीं था, लेकिन आप ईवेंट को सक्षम / अक्षम करने के लिए लाइव () विधि का भी उपयोग कर सकते हैं ।

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

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

इस कोड के साथ क्या होगा कि जब आप #mydisablebutton पर क्लिक करते हैं, तो यह #myimage तत्व में अक्षम वर्ग को जोड़ देगा। इससे ऐसा होगा कि चयनकर्ता अब तत्व से मेल नहीं खाता है और घटना को तब तक निकाल नहीं दिया जाएगा जब तक कि 'अक्षम' वर्ग को .live () चयनकर्ता को फिर से वैध बनाने के लिए हटा नहीं दिया जाता है।

इसके साथ ही उस वर्ग के आधार पर स्टाइल को जोड़कर इसके अन्य लाभ हैं।

Comments

उपयोग करने का अच्छा तरीका live(), इसके बारे में पहले कभी इस तरह से उपयोग करने के बारे में नहीं सोचा था ... कोडिंग सुविधा के अलावा, क्या यह तेज है या यह बाइंड / अनबाइंड का उपयोग करने के लिए कोई अन्य लाभ प्रदान करता है?

— चक्र

यदि आप तत्वों को जोड़ / हटा रहे हैं, तो बाइंड पर निश्चित प्रदर्शन लाभ हैं क्योंकि लाइव के साथ बंधन केवल एक बार किया जाता है। लगता है jQuery विशिष्ट तत्वों के लिए बाध्य करने के बजाय अधिक लाइव और प्रतिनिधि घटनाओं के लिए जा रहा है।

— मैकथोनी

लाइव को डिसेबल करने के लिए आप डाई ()

— मून्स

"JQuery 1.7 के रूप में, .live () विधि को हटा दिया गया है। ईवेंट हैंडलर संलग्न करने के लिए .on () का उपयोग करें। jQuery के पुराने संस्करणों के उपयोगकर्ताओं को .live () के लिए .delegate () का उपयोग करना चाहिए।" api.jquery.com/live

— लुकास पॉटरस्की

आह, चंचल jQuery, एक दिन आप एक आदमी को 300 प्रतिनिधि लाते हैं, अगले दिन यह अप्रचलित है।

— MrBoJangles

Answer 3

यदि आप किसी घटना का सिर्फ एक समय में जवाब देना चाहते हैं , तो निम्नलिखित सिंटैक्स वास्तव में उपयोगी होना चाहिए:

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

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

आर्ग्युमेंट्स का उपयोग करके । हम यह सुनिश्चित कर सकते हैं कि एक विशिष्ट अनाम-फंक्शन हैंडलर को हटा दिया जाए, और इस प्रकार, किसी दिए गए ईवेंट के लिए एक ही समय हैंडलर हो। आशा है कि यह दूसरों की मदद करता है।

Comments

बिल्कुल, हालांकि कभी-कभी आप हैंडलर अनबाउंड होने के बारे में निश्चित तर्क रखना चाह सकते हैं (जैसे कि जब तक वे पहले एक टेक्स्ट बॉक्स दाखिल नहीं करते हैं) को अनबाइंड न करें।

— घीस

बहस .कड़े सख्त मोड में हटा दिया गया है!

— zloctb

Answer 4

यह unbind फ़ंक्शन का उपयोग करके किया जा सकता है।

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

आप jquery में एक ही ऑब्जेक्ट और ईवेंट में कई ईवेंट हैंडलर जोड़ सकते हैं। इसका मतलब यह है कि नया जोड़ने से पुराने की जगह नहीं बनती।

इवेंट हैंडलर बदलने के लिए कई रणनीतियाँ हैं, जैसे इवेंट नेमस्पेस। ऑनलाइन डॉक्स में इस बारे में कुछ पृष्ठ हैं।

इस प्रश्न को देखो (यह है कि मैं कैसे unbind के सीखा)। उत्तरों में इन रणनीतियों का कुछ उपयोगी वर्णन है।

कैसे jquery में बाध्य हॉवर कॉलबैक फ़ंक्शन को पढ़ने के लिए

Answer 5

हो सकता है अनबाइंड मेथड आपके काम आए

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

Answer 6

मुझे प्रोप और एटर का उपयोग करके घटना को शून्य करना था। मैं इसे एक या दूसरे के साथ नहीं कर सका। मैं भी .unbind काम करने के लिए नहीं मिल सका। मैं एक टीडी तत्व पर काम कर रहा हूं।

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

Comments

मैंने इसे वोट किया क्योंकि मैं लगभग 30 मिनट के लिए एक ऑनब्लर को अनबिक करने की कोशिश कर रहा था। '.unbind' ने काम नहीं किया, '.prop' ने काम नहीं किया, '.attr' ने काम नहीं किया, लेकिन .prop और .attr दोनों के साथ इस ट्रिक ने चाल चली। अजीब। मैं jquery के साथ क्रोम का उपयोग कर रहा हूँ 1.7.2

— जेरेमी

मुझे भी! मैंने सरल <a> टैग से क्लिक ईवेंट हटाने की कोशिश की! इसके लिए थैंक्स। मेरे मामले में .prop ("ऑनक्लिक", नल) पर्याप्त था।

— जान लोबौ

मुझे भी। unbind और off ने jf 1.7.2 और .prop ("onclick", null) के साथ FF पर मेरे लिए काम नहीं किया, मेरे मामले में भी पर्याप्त था

— bryanallott

मुझे लगता है कि कारण है कि उपरोक्त तरीके आप लोगों के लिए काम नहीं करते हैं क्योंकि आप इसे कैसे सेट करते हैं। यदि आपने ईवेंट हैंडलर को DOM में लिखा है, तो हाँ, ईवेंट हैंडलर को साफ़ करने के लिए इस विशेषता को साफ़ करना आवश्यक है, हालाँकि, मुझे लगता है कि अधिकांश लोग (स्वयं सहित) ऐसी चीज़ों (javascrip, इवेंट हैंडलर, आदि) को बाहर रखना चाहते हैं। DOM, इसलिए जब हम एक इवेंट हैंडलर सेट करना चाहते हैं $("#elementId").click(function(){//Event execution code goes here});तो हम कुछ इस तरह का उपयोग करते हैं कि यह html पेज में बिल्कुल भी न हो। यह स्पष्ट करने के लिए कि हमें वास्तव में उपयोग करने की आवश्यकता है .unbind(), या पसंदीदा.off()

— VoidKing

यहाँ एक ऐसे व्यक्ति से है, जिसने jQuery के माध्यम से जोड़े गए गुणों को खोजने के लिए सिर्फ एक घंटे का समय बिताया है, क्रोम के तत्व पैनल पर नहीं दिखा। कोशिश कर रहा है unbindऔर offयह समस्या को हल नहीं कर रहा था। आपका बहुत बहुत धन्यवाद!

— रेनन

Answer 7

यदि घटना इस तरह से जुड़ी हुई है , और लक्ष्य को अनासक्त किया जाना है:

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

});​

Answer 8

आप 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 में ऊपर की टिप्पणी में थोड़ा अधिक स्पष्ट रूप से इसका उल्लेख किया गया है।

Answer 9

2014 के लिए अद्यतन किया गया

JQuery के नवीनतम संस्करण का उपयोग करते हुए, आप अब बस नाम से सभी घटनाओं को नाम स्थान पर रखने में सक्षम हैं $( "#foo" ).off( ".myNamespace" );

Answer 10

इनलाइन ऑनक्लिक ईवेंट को हटाने का सबसे अच्छा तरीका है $(element).prop('onclick', null);

Answer 11

करने के लिए remove सभी event-handlers , यह क्या मेरे लिए काम किया है:

सभी घटना संचालकों को हटाने का मतलब है कि HTML structureसभी के बिना और उसके event handlersसाथ मैदान को समतल करना । ऐसा करने के लिए, मदद की।elementchild nodesjQuery'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होगा।

शुभ लाभ...

Answer 12

जानकारी के लिए धन्यवाद। बहुत उपयोगी मैं इसे दूसरे उपयोगकर्ता द्वारा संपादन मोड में रहते हुए पृष्ठ इंटरैक्शन को लॉक करने के लिए उपयोग किया। मैंने इसे ajaxComplete के साथ संयोजन में उपयोग किया। समान रूप से नहीं बल्कि कुछ हद तक समान व्यवहार।

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

function executePageLock(){
    //do something
}

Answer 13

मामले की .on()विधि में पहले विशेष चयनकर्ता के साथ प्रयोग किया जाता था, जैसे निम्नलिखित उदाहरण में:

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

दोनों unbind()और .off()तरीके काम नहीं करने वाले हैं।

हालाँकि, .undelegate () पद्धति का उपयोग वर्तमान चयनकर्ता से मेल खाने वाले सभी तत्वों के लिए ईवेंट को पूरी तरह से हटाने के लिए किया जा सकता है:

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

Comments

मैंने इस समाधान को देखने के लिए पूरे पृष्ठ को स्क्रॉल किया, एक आकर्षण की तरह काम किया।

— अभिषेक पांडे

Answer 14

यदि आप $(document).on()एक गतिशील रूप से बनाए गए तत्व में श्रोता को जोड़ने के लिए उपयोग करते हैं तो आपको इसे हटाने के लिए निम्नलिखित का उपयोग करना पड़ सकता है:

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

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

Answer 15

यह भी ठीक काम करता है। सरल और आसान। http://jsfiddle.net/uZc8w/570/

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

Answer 16

यदि आप के onclickमाध्यम से सेट htmlआप की जरूरत हैremoveAttr ($(this).removeAttr('onclick'))

यदि आप इसे jquery के माध्यम से सेट करते हैं (जैसा कि ऊपर मेरे उदाहरण में पहले क्लिक के बाद) तो आपको करने की आवश्यकता है unbind($(this).unbind('click'))

Answer 17

मुझे पता है कि यह देर से आता है, लेकिन घटना को हटाने के लिए सादे जेएस का उपयोग क्यों नहीं किया जाता है?

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

Comments

सुझाव अच्छा है, मैं जब उपलब्ध देशी जावास्क्रिप्ट का उपयोग करना पसंद

— Michiel

Answer 18

वर्णित सभी दृष्टिकोण मेरे लिए काम नहीं करते थे क्योंकि मैं क्लिक इवेंट on()को उस दस्तावेज़ के साथ जोड़ रहा था जहां तत्व रन-टाइम पर बनाया गया था:

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

मेरा समाधान:

जैसा कि मैं ".बटन" वर्ग को अनबाइंड नहीं कर सकता था, मैंने सिर्फ एक और वर्ग को बटन पर असाइन किया था जिसमें समान सीएसएस शैली थी। ऐसा करने से लाइव / ऑन-इवेंट-हैंडलर ने क्लिक को अंत में अनदेखा कर दिया:

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

उम्मीद है की वो मदद करदे।

Answer 19

आशा है कि मेरे नीचे का कोड सभी को समझाता है। 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>

Comments

})(jQuery);जब आप पहले से ही विश्व स्तर पर पहुँच सकते हैं तो आप IIFE में क्यों पास हो रहे हैं ?

— ब्रायन पी

अच्छा सवाल ब्रायन। इस विधि को अभ्यास के कारण मेरे जीन में दर्ज किया गया है। - नॉन जक्वेरी प्लगइन के लिए कुछ संभावना हो सकती है चर $, इसलिए मैं सीधे $ का उपयोग नहीं कर सकता। - js स्क्रिप्ट फ़ाइल में "jQuery" शब्द का बार-बार उपयोग फ़ाइल के बाइट का आकार बढ़ा सकता है, जहाँ jQuery 6 बाइट स्ट्रिंग है। इसलिए मैं "बाइट" या सिंगल बाइट के किसी भी वैरिएबल का उपयोग करना पसंद करता हूं।

— मिस्टिकमो

Answer 20

बस बटन से इसे हटा दें:

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