jQuery क्लिक ईवेंट हैंडलर एक चेकबॉक्स

मैं एक एक ASPX पेज में निम्न कोड के साथ समस्या है के लिए दो बार कहा जाता हैjQuery क्लिक ईवेंट हैंडलर एक चेकबॉक्स

अगर मैं चेकबॉक्स (छोटे वर्ग) पर क्लिक करें, यह के रूप में की उम्मीद
अगर मैं चेकबॉक्स का पाठ ("चेकबॉक्स XYZ") पर क्लिक करके क्लिक करें घटना में दो बार के सक्रिय होने पर काम करता है, और सतर्क दो बार दिखाया गया है । कैसे मैं सही ढंग से सेटअप क्लिक ईवेंट हैंडलर इसे दो बार बुलाया जा रहा से रोकने के लिए है
```
<span class="test"> 
<input id="ctl00_c1_cb1" type="checkbox" name="ctl00$c1$cb1" checked="checked"/> 
<label for="ctl00_c1_cb1">Checkbox XYZ</label> 
</span> 
```
:

मैं इस तरह से चेकबॉक्स HTML के लिए प्रदान की गई है, जो इस तरह है के साथ क्या करना है लगता है ?

2009-10-08 M4N

ठीक है फिर से मेरा प्रश्न पढ़ने के बाद, मुझे यह पता चला कि इसे कैसे हल किया जाए।

बस jQuery चयनकर्ता के "इनपुट" जोड़ें:

<script type="text/javascript"> 
$(document).ready(function() { 
     $('.test input').click(function() { 
       alert("click") 
     }) 
}); 
</script>

स्रोत

2009-10-08 09:30:27 M4N

@ मार्टिन - मुझे लगता है कि ऐसा इसलिए है क्योंकि 'for' attrbute वाला एक लेबल उस तत्व के क्लिक ईवेंट को उठाता है जो संलग्न है। तो अपने jQuery कोड में, आप लेबल और इनपुट दोनों के लिए एक क्लिक इवेंट हैंडलर सेट अप करते हैं। लेबल पर क्लिक करते समय, लेबल पर सेट किए गए क्लिक इवेंट हैंडलर निष्पादित हो जाएंगे, फिर लेबल पर क्लिक इवेंट हैंडलर निष्पादित होगा जब लेबल क्लिक ईवेंट को उठाएगा। –

उपरोक्त! इसमें एक इनपुट के साथ लेबल का उपयोग करते समय भी वही बात थी, एक div में बदल गया और यह –

क्या आप देख रहे हैं घटना उत्साह से भरा हुआ है। क्लिक ईवेंट को पहले लेबल द्वारा संभाला जाता है और फिर चेकबॉक्स पर भेज दिया जाता है। आपको प्रत्येक के लिए एक चेतावनी मिलती है। ईवेंट बुलबुले को रोकने के लिए आपको अपने क्लिक हैंडलर में झूठी वापसी की आवश्यकता है।

$(document).ready(function() { 
     $('.test').click(function() { 
       alert("Click"); 
       return false; 
     }) 
});

हालांकि, जबकि इस घटना में यह बुदबुदाती रोकता भी राज्य में बदलाव करने से चेकबॉक्स को रोकने की अवांछनीय पक्ष प्रभाव पड़ता है। तो आपको इसके चारों ओर कोड करने की आवश्यकता होगी।

स्रोत

2009-10-08 09:56:58 Andrew

मुझे लगता है कि क्योंकि एक for विशेषता के साथ एक <label> जो क्लिक करने के लिए जुड़ा हुआ है <input type="radio"> या <input type="checkbox"> तत्व की क्लिक करें घटना को जन्म देती है यह है।

तो अपने jQuery कोड में, आपने और <input> दोनों के लिए <span class="test"> दोनों के लिए एक क्लिक ईवेंट हैंडलर सेट अप किया है। <label> पर क्लिक करते समय, लेबल पर सेट किए गए क्लिक ईवेंट हैंडलर निष्पादित हो जाएंगे, फिर <input> पर स्थापित क्लिक इवेंट हैंडलर निष्पादित होगा जब लेबल <input> पर क्लिक ईवेंट उठाता है।

स्रोत

2009-10-08 11:02:32

चला गया है यदि आप 'अलर्ट ("क्लिक करें") बदलते हैं, तो' अलर्ट '(e.target।टैगनाम); '- पहले आप' LABEL' ''INPUT' देखते हैं, यह दर्शाता है कि लेबल पहले एक क्लिक ईवेंट उठाता है, फिर संबंधित चेकबॉक्स को चेक/अनचेक करता है, जिससे इनपुट एक क्लिक ईवेंट को बढ़ाने के लिए होता है। –

अंत में समस्या का एक सभ्य स्पष्टीकरण खोजने के लिए अच्छा है। –

$(document).ready(function() { 
    $('.test').click(function(event) { 
        event.stopImmediatePropagation(); 
        alert("Click"); 
        }) 
       } 
      );

मैं घटना प्रचार को रोकने के काम कर रहे मेरे कोड प्राप्त करने में सक्षम था। इससे चेकबॉक्स की स्थिति में बदलाव प्रभावित नहीं हुआ।

स्रोत

2009-11-26 00:09:09 Juma

दुर्भाग्यवश यह मेरे लिए काम नहीं करता है (आईई 8 में परीक्षण)। जब मैं चेकबॉक्स से जुड़े लेबल/टेक्स्ट पर क्लिक करता हूं, तो अलर्ट अभी भी दो बार दिखाया जाता है। – M4N

मैंने अभी एक ही चीज़ का अनुभव किया है, लेकिन मुझे यकीन नहीं है कि घटना बुलबुले मेरी समस्या का कारण बन रही है। मेरे पास कस्टम पेड़ नियंत्रण है, और जब कोई आइटम खोला जाता है, तो मैं एक निश्चित प्रकार के सभी तत्वों को एक हैंडलर संलग्न करने के लिए $(id).click() का उपयोग करता हूं।

मुझे संदेह है कि इसका मतलब यह है कि मौजूदा वस्तुओं को कहीं और पहले से ही घटना है, फिर इसे फिर से जोड़ा जा सकता है। मैंने पाया कि unbinding सब कुछ तो फिर से बाध्यकारी मेरी समस्या हल है, इस प्रकार:

$('img.load_expand').unbind("click").click(function() 
{ 
    // handler 
});

स्रोत

2009-12-04 12:21:00 halfer

हल: इस फ़ायरफ़ॉक्स 3.6.12 और IE8 के साथ काम करने के लिए।

$(function(){ 
     $("form input:checkbox").unbind("click") 
     .click(function(){ 
      val = $(this).val(); 
      alert(val); 
     }) 
    }

चाल .click(fn) को यह बाँध से पहले unbind("click"). है, यह एक ही घटना को दो बार आग लगाने के लिए अक्षम कर देगा।

ध्यान दें कि ईवेंट "परिवर्तन" पहली बार चेकबॉक्स नहीं होगा चेकबॉक्स चेक किया गया है। तो मैं इसके बजाय "क्लिक" का उपयोग करता हूं।

स्रोत

2010-11-27 07:52:02 aifarfa

मैं एक क्लिक घटना के साथ एक ही मुद्दे में भाग गया, और this आलेख मिला। संक्षेप में, यदि आपके पास <body></body> टैग के अंदर एक से अधिक jQuery दस्तावेज़-तैयार फ़ंक्शन हैं, तो आप कई ईवेंट प्राप्त कर सकते हैं। फिक्स निश्चित रूप से ऐसा करने के लिए नहीं है, या क्लिक ईवेंट को अनबिंड करने के लिए और इसे दोबारा दर्ज करें, जैसा ऊपर बताया गया है। कभी-कभी, एकाधिक जावास्क्रिप्ट पुस्तकालयों के साथ, एकाधिक दस्तावेज़ से बचना मुश्किल हो सकता है। पहले से), इसलिए अनबिंड एक अच्छा कामकाज है।

<code> 
$('#my-div-id').unbind("click").click(function() 
    { 
    alert('only click once!'); 
    } 
</code>

स्रोत

2011-09-19 13:59:21 MontyThreeCard

बस के बजाय .mouseup का उपयोग .click

स्रोत

2013-01-05 23:33:21 yoshyosh

समारोह दो बार चलाता है। एक बार अंदर से और फिर इसे अंदर से फिर से बुलाया जाता है। अंत में एक वापसी विवरण जोड़ें सरल।

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.test').click(function() { 
     alert("click"); 
     return false; 
    }) 
}); 
</script> 

<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />

यह मेरे लिए पूरी तरह से काम करता है।

स्रोत

2013-09-02 16:19:28

मुझे पता है कि सवाल अब बहुत दूर है, लेकिन मुझे अभी भी एक ही समस्या का सामना करना पड़ा है और मैं जो समाधान मिला वह जोड़ना चाहता हूं, भविष्य में इसी तरह की समस्याओं के लिए आसान हो सकता है।

जब आप जोड़ने ASP कोड की तरह:

<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />

समस्या यह है कि <asp:CheckBox ...> एक एचटीएमएल नियंत्रण नहीं है, यह सिर्फ कुछ एएसपी ~~कुछ मनोवैज्ञानिक~~ की मुड़ मन का आविष्कार से मिलकर बना है, इसलिए है ब्राउज़र कुछ और प्राप्त होगा।

ब्राउज़र की तरह कुछ प्राप्त होगा:

<span class="test"> 
    <input id="garbageforYourId_cb1" type="checkbox" name="garbage$moregarbage$cb1"/> 
    <label for="evenMoreGarbage_cb1">Checkbox XYZ</label> 
</span>

कई संभव समाधान में से एक: अंतराल प्राप्त

ब्राउज़र जो सामग्री एक इनपुट "चेकबॉक्स" और के साथ के लिए एक लेबल आपका लेख। इसलिए इसके लिए मेरा समाधान कुछ ऐसा होगा:

$('.test > :checkbox').click(function() { 
    if ($(this).attr("checked")) { 
     alert("checked!!!"); 
    } else { 
     alert("non checked!!!"); 
    } 
});

वहां क्या हुआ? इस चयनकर्ता $('.test > :checkbox') का अर्थ है: कक्षा "परीक्षण" वाले तत्व ढूंढें और इसमें कोई भी चेकबॉक्स लाएं।

स्रोत

2013-12-30 22:52:25 Oaxas

jQuery क्लिक ईवेंट हैंडलर एक चेकबॉक्स

उत्तर

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