2011-01-04 15 views
9

jQuery का उपयोग करके, मैं किसी दिए गए बटन की disabled विशेषता को बदले बिना, इसके लिए सभी क्लिक ईवेंट अक्षम कर दूंगा।मैं बिना किसी अक्षमता के बटन पर क्लिक ईवेंट को अस्थायी रूप से कैसे अक्षम कर सकता हूं?

मैं क्लिक ईवेंट हैंडलर को पुनः प्राप्त करने, उन्हें अनदेखा करने और उन्हें संग्रहीत करने के बारे में सोच रहा था (कहें, data() का उपयोग करके)।

फिर बटन फिर से सक्षम होने के बाद मैं उन्हें फिर से बांध सकता हूं।

+3

आप अपने दृष्टिकोण पर पुनर्विचार करने के लिए कर सकते हैं - नहीं काम करने के लिए यदि आप एक बटन चाहते हैं इसे अक्षम करें। यह उपयोगकर्ता को स्पष्ट रूप से झुकाता है कि बटन अक्षम है। यह डिफ़ॉल्ट व्यवहार के आसपास काम करने से कहीं ज्यादा स्वच्छ, सरल और अधिक संगत है। आप बटन को अक्षम करने से बचना क्यों चाहते हैं? –

+0

क्योंकि, AFAIK, अक्षम बटन को स्टाइल नहीं किया जा सकता है। – Ovesh

उत्तर

16

नहीं कठिन पहले से ही jQuery के बाद से ऐसा करने के लिए अपने सभी ईवेंट हैंडलर को तत्व पर data() के रूप में स्टोर करता है। आप .data().events के माध्यम से इस ऑब्जेक्ट को (और संशोधित) प्राप्त कर सकते हैं।

इस पेज के शीर्ष बाईं ओर स्थित "StackExchange" ड्रॉपडाउन अक्षम करने का अधिकार अब आपके कंसोल में$("#portalLink a").data().events.click = nullकी कोशिश करो।

अब आप आसानी से साथ संचालकों के लिए एक संदर्भ बचा सकते हैं:

events.click = events._click; 
events._click = null; 

ध्यान दें कि यह घटनाओं के माध्यम से बंधे हुए हैं कि अक्षम नहीं करेंगे:

events._click = events.click; 
events.click = null; 

और फिर उन्हें का उपयोग करके बहाल .delegate() या .live(), क्योंकि वे ईवेंट बबलिंग/प्रचार द्वारा काम करते हैं। उन को अक्षम करने के साथ ही, बस एक नया हैंडलर बाँध कि पूर्वज तत्वों को ब्लॉक प्रचार:

events._click = events.click; 
events.click = null; 
// Block .live() and .delegate() 
$("#el").click(function (e) { 
    e.stopPropagation(); 
}); 

तुम भी इस अवरोधक समारोह निकल की जरूरत नहीं है जब यह, फिर संचालकों को सक्षम करने के बाद से events.click = events._click को पार कर जाएगी समय आ गया है कार्य आप बस पुराने पुराने हैंडलरों के साथ बंधे हैं।

+1

इस प्रकार का दृष्टिकोण समस्याग्रस्त हो सकता है। एक के लिए, मुझे लगता है कि मैंने कहीं पढ़ा है कि यह व्यवहार jQuery के नए संस्करणों में समर्थित नहीं है। लेकिन अगर यह सच नहीं है, तो यह एक दस्तावेज व्यवहार नहीं है, इसलिए मैं jQuery के भविष्य के संस्करणों के लिए इस पर भरोसा नहीं कर सकता। – Ovesh

+1

@ ओवेश, एक तरफ, मुझे लगता है कि जावास्क्रिप्ट भाषाओं में से एक है, संभवतः इसकी गतिशील प्रकृति के कारण, वास्तविक रूप से "खुला स्रोत" (कभी संकलित नहीं किया गया, केवल कभी-कभी छोटा हुआ), और ब्राउज़र असंगतताओं का इतिहास, जहां वहां है कार्यान्वयन विवरण छिपाने/संरक्षित करने में रूचि से कम। जब तक जोखिमों को समझा जाता है, और कोई बेहतर विकल्प मौजूद नहीं होता है, तो प्रोटोटाइप को संशोधित करने, कार्यों को ओवरराइड करने और सामान्य रूप से गोता लगाने के लिए स्वतंत्र महसूस करें .. दूर हैक;) –

+0

सहमत हैं। मैं जवाब स्वीकार करूंगा, क्योंकि शायद कोई बेहतर समाधान नहीं है। – Ovesh

0

यही रास्ता है। आप विशेषता

$(button_element).attr('click', ''); 

और

busing
$(button_element).attr('click', 'do_the_regular_action()'); 
+0

मान लें कि मैं तत्व को सौंपा गया सभी ईवेंट हैंडलर नहीं जानता हूं। और एक से अधिक हो सकता है। – Ovesh

+0

उस मामले में मेरा दृष्टिकोण काम नहीं करेगा – Thariama

0

आप unbind और bind

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

और

उपयोग कर सकते हैं स्विच कर सकते हैं आप onclick विशेषता के रूप में निर्दिष्ट किया है

$("#myButton").click(function() { 
    if ($(this).attr("temp_disable") == "disabled") { 
     //nothing to do, temporarily disabled... 
    } 
    else { 
     alert("You clicked me!"); 
    } 
}); 

10 सेकंड के लिए "को निष्क्रिय" यह करने के लिए::

+0

मुझे नहीं लगता कि यह ओपी के प्रश्न का उत्तर देता है (हालांकि मैं गलत हो सकता हूं)। इसकी आवाज़ से, कई क्लिक हैंडलर हो सकते हैं, और वह बाध्यकारी के लिए हैंडलर का संदर्भ प्राप्त करने में सक्षम नहीं हो सकता है (उदा। अज्ञात फ़ंक्शन, या किसी अन्य स्कोप में फ़ंक्शन)। –

+0

यह सही है। @ थारीमा को मेरी टिप्पणी देखें। – Ovesh

3

यहाँ अभी तक एक और तरीका है

$("#myButton").attr("temp_disable", "disabled"); 
window.setTimeout(function() { $("#myButton").attr("temp_disable", ""); }, 10000); 

लाइव परीक्षण का मामला: http://jsfiddle.net/yahavbr/ByM6h/

+0

यह वही है जो मैंने किया है। लेकिन समस्या यह है कि इसे परिभाषित हर हैंडलर में जोड़ा जाना है। डिज़ाइन पॉइंट-ऑफ-व्यू से, यह एक अच्छा समाधान नहीं है, क्योंकि कुछ ईवेंट कोड द्वारा जोड़े जा सकते हैं जो मेरे नियंत्रण में नहीं है। – Ovesh

+1

@ ओवेश को वास्तव में बटन को अक्षम करने के अलावा "वैश्विक रूप से" करने का एकमात्र तरीका इसे किसी अन्य चीज़ में बदलना है। 'div' जो केवल एक बटन की तरह दिखता है, फिर समय समाप्त होने पर इसे बटन पर वापस बदलें - उम्मीद है कि ईवेंट हैंडलर संरक्षित किए जाएंगे, इसे पहले जांचना होगा। –

+0

यह वास्तव में एक बहुत अच्छा विचार है। आप इसे एक स्टाइल सक्षम बटन के साथ प्रतिस्थापित कर सकते हैं (बिना किसी क्लिक ईवेंट संलग्न), और 'डेटा() 'का उपयोग करके मूल बटन रखें। फिर मूल बटन को वापस बदलें। – Ovesh

0

मैं इस सवाल का जवाब (रों) बैरी और Thariama द्वारा की पेशकश की है ... जो मुझे लगता है कि Ovesh की आपत्तियों को पूरा करेगा पर विस्तार करेंगे:

आप अपने घटना के लिए बाध्य करने के लिए एक नाम स्थान जोड़ सकते हैं।इससे आप अन्य बाइंडिंग के साथ टकराव किए बिना बाद में उस विशिष्ट घटना को बाध्यकारी कर सकते हैं। मुझे लगता है कि यह स्वीकार किए गए उत्तर से क्लीनर है ... (निष्पक्ष होने के लिए, यह मूल प्रश्न के समय jQuery में उपलब्ध नहीं हो सकता है)।

// A generic click handler: 
$('.myButton').click(function() { ... }); 

// A namespaced click handler: 
$('.myButton').bind('click.someSituation', function() { ... }); 

// Later you can unbind only the handler you want by using the namespace: 
$('.myButton').unbind('click.someSituation'); 

// The default click handler still works. 
+0

मुझे लगता है कि मुझे इसे प्रश्न में स्पष्ट करना चाहिए था। कई क्लिक ईवेंट हो सकते हैं, जिनमें से सभी मेरे कोड से बंधे नहीं थे। यह समाधान पर्याप्त सामान्य नहीं है। – Ovesh

+0

मेरे उदाहरण में जेनेरिक .click() एक अन्य कोड द्वारा बाध्य एक घटना है। नामित .bind (क्लिक करें ...) आपके कोड में है। आप अन्य क्लिक हैंडलर को प्रभावित किए बिना, अपने नेमस्पेस्ड क्लिक हैंडलर को अनबाइंड कर सकते हैं। –

+0

आह, लेकिन सवाल कहता है, मैं * सभी * क्लिक घटनाओं को अक्षम करना चाहता हूं। – Ovesh

0

के बजाय इस बात का प्रयोग करें कोर जावास्क्रिप्ट कर जैसे इस कार्य को करने के लिए निम्नलिखित उदाहरण देखें।

function MakeSaveDisabled(flg) { 
    if (flg != null) { 
     $(".btnpost").each(function() { 
      this.removeAttribute("disabled"); 
      if (this.hasAttribute("oclickevt")) { 
       this.setAttribute("onclick", this.getAttribute("oclickevt")); 
      } 
     }); 
    } 
    else { 
     $(".btnpost").each(function() { 
      this.setAttribute("disabled", "true"); 
      if (this.getAttribute("onclick") != null) { 
       this.setAttribute("oclickevt", this.getAttribute("onclick")); 
      } 
      this.removeAttribute("onclick"); 
     }); 
    } 
} 

कुछ अस्थायी विशेषता में जावास्क्रिप्ट फ़ंक्शन को सहेजें और जब आपको आवश्यकता हो तो इसे बाध्य करें।

1

यहाँ सभी उत्तरों अब पुराने हो गए हैं - jQuery 1.7 के रूप में आप .off() का उपयोग करना चाहिए के रूप में समझाया on the official jQuery site

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>off demo</title> 
 
    <style> 
 
    button { 
 
    margin: 5px; 
 
    } 
 
    button#theone { 
 
    color: red; 
 
    background: yellow; 
 
    } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
</head> 
 
<body> 
 
    
 
<button id="theone">Does nothing...</button> 
 
<button id="bind">Add Click</button> 
 
<button id="unbind">Remove Click</button> 
 
<div style="display:none;">Click!</div> 
 
    
 
<script> 
 
function flash() { 
 
    $("div").show().fadeOut("slow"); 
 
} 
 
$("#bind").click(function() { 
 
    $("body") 
 
    .on("click", "#theone", flash) 
 
    .find("#theone") 
 
     .text("Can Click!"); 
 
}); 
 
$("#unbind").click(function() { 
 
    $("body") 
 
    .off("click", "#theone", flash) 
 
    .find("#theone") 
 
     .text("Does nothing..."); 
 
}); 
 
</script> 
 
    
 
</body> 
 
</html>

+1

मैं इसे स्वीकार करता हूं, लेकिन मुझे पहले उदाहरण को कॉल करने के लिए संपादित किया जाना चाहिए() बिना तर्क के, यह दिखाने के लिए कि यह सभी संलग्न घटनाओं को कैसे हटाता है (उन्हें संदर्भ रखने की आवश्यकता के बिना)। यह मूल प्रश्न को अधिक निकटता से संबोधित करेगा। – Ovesh

संबंधित मुद्दे

 संबंधित मुद्दे