2011-10-05 15 views
12

पर .click घटना फायरिंग नहीं:jQuery ट्रिगर मैं एक चेक-सभी शीर्षक में चेकबॉक्स जो तालिका के उस स्तंभ में सभी चेक बॉक्स की जाँच करता है के साथ तालिका है ('क्लिक') चेकबॉक्स

<input class="check-all" type="checkbox" id="masterCheck" /> 

हालांकि, मेरे पृष्ठों में से एक पर मैं पेज लोड पर चेक-ऑल चेकबॉक्स को स्वचालित रूप से जांचना चाहता हूं।

ऐसा करने के लिए मैं एक ट्रिगर आग नीचे एक की तरह ('क्लिक') समारोह का प्रयास किया है:

$(document).ready(function() { 
    if ($("#masterCheck").attr('checked')) { 
    } else { 
     $("#masterCheck").trigger('click'); 
    } 
}); 

यह चेक बॉक्स की जाँच करता है ठीक है, लेकिन चेक बॉक्स के लिए अपने कस्टम क्लिक करें घटना आग नहीं करता है

$(function() { 
    $('.check-all').click(function() { 
     $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked); 
    }); 
}); 

मैं भी एक जावास्क्रिप्ट setTimeout जोड़ने, यह सोचकर कि कस्टम क्लिक समारोह काफी अभी तक लोड नहीं किया जा रहा था की कोशिश की है, लेकिन यह अभी भी नहीं किया था: कक्षा .check-सब (नीचे) के साथ प्रतीक्षा करने के बाद कस्टम क्लिक फ़ंक्शन को आग लगाएं , 2, और 3 सेकंड।

पेज लोड पर, फिर मैं अपने प्री-चेक किए गए चेकबॉक्स को अन-चेक कर सकता हूं और कॉलम में सभी चेकबॉक्स को पूरी तरह से जांचने के लिए पुनः जांच सकता हूं।

क्या मुझे दस्तावेज़ पर अपने jQuery में कुछ विशेष जोड़ना है। इसे कस्टम क्लिक ईवेंट को आग लगाने की अनुमति देने के लिए?

*** EDIT1:

ठीक है, मैं अपने पन्ने पर सही document.ready समारोह ऊपर कस्टम क्लिक करें घटना को जोड़ने के लिए सुनिश्चित करने के लिए यह भरी हुई है (जैसा कि पिछली कस्टम क्लिक करें घटना एक मास्टर में है का प्रयास किया है .js फ़ाइल मेरे _Layout में उपयोग की जाती है)। इसके अलावा, मैंने अपने नए कस्टम क्लिक ईवेंट के अनुरूप होने के लिए अपने चेकबॉक्स की कक्षा बदल दी है, इसलिए मैं अपने मास्टर .js फ़ाइल में से किसी के साथ संघर्ष नहीं करता हूं।

<input class="check-allx" type="checkbox" id="masterCheck" /> 


// Check all checkboxes when the one in a table head is checked: 
    $(function() { 
     $('.check-allx').click(function() { 
      $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked); 
      alert(this); 
     }); 
    }); 
// Check for unchecked masterCheck 
    $(document).ready(function() { 
     if ($("#masterCheck").attr('checked')) { 
     } else { 
      //$("#masterCheck").trigger('click'); 
      $("#masterCheck").click(); 
     } 
    }); 

यह कस्टम क्लिक करें घटना जो प्रगति है के भीतर मेरी सूचना के फेंक रहा है, लेकिन कोई लाभ नहीं हुआ अपने सभी चेक बॉक्स की तरह वे चाहिए की जांच करते हैं। नोट: मैंने ट्रिगर ('क्लिक') को एक .click() में भी बदल दिया है, जो दोनों मेरी स्थिति में एक ही काम करते हैं।

+0

बस के रूप में अपने संभव सिद्धांत के लिए एक और परीक्षण है कि कस्टम ईवेंट हैंडलर, अभी तक परिभाषित नहीं किया जा सकता है अगर आप अपना चेक सीधे ऊपर अपने कस्टम क्लिक हैंडलर को परिभाषित करने की कोशिश की है, सिर्फ इतना है कि समस्या का एक न्यूनतम संस्करण बनाने के लिए? –

+0

बेन: मैंने इसे EDIT1 में ऊपर से आजमाया है। अब यह मेरे कस्टम क्लिक इवेंट में तोड़ रहा है, लेकिन मेरे सभी चेकबॉक्स अभी भी क्लिक नहीं कर रहे हैं। – Lando

उत्तर

31

अद्यतन: यह केवल jQuery 1.8 और नीचे लागू होता है। यह fixed in jQuery 1.9 था।

समस्या यह है कि jQuery में मैन्युअल रूप से click() को कॉल करना वास्तविक क्लिक से भिन्न रूप से काम करता है।

जब आप वास्तव में क्लिक करते हैं, तो पहले चेकबॉक्स स्थिति बदल जाती है, तो आपके क्लिक हैंडलर को कॉल किया जाता है।

जब आप click() पर कॉल करते हैं, तो पहले क्लिक हैंडलर को कॉल किया जाता है, तो चेकबॉक्स स्थिति बदल जाती है।

तो जब आप अपने क्लिक हैंडलर में click पर कॉल करते हैं, तो this.checked अभी भी गलत होने जा रहा है। आप इसे एक click हैंडलर की एक change हैंडलर बजाय बनाने इस तरह से इसे ठीक कर सकते हैं:

$('.check-allx').change(function() { 
    $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked); 
}); 

वास्तविक मैन्युअल क्लिक और jQuery के बीच अंतर की पूरी व्याख्या के लिए In jQuery, why does programmatically triggering 'click()' on a checkbox not immediately check it? देखें क्लिक ट्रिगर।

+0

महान उत्तर की जांच करें, स्थिति पूरी तरह से बताती है और एक व्यवहार्य समाधान देता है। – prashn64

+0

महान उत्तर। मेरा समाधान jquery का एक नया संस्करण भी आयात करना था और इसके साथ क्लिक करना था। यह संगम में था, इसलिए मेरे पास पुराना रखने के अलावा कोई विकल्प नहीं था। यहां देखें jquery के 2 संस्करण का उपयोग कैसे करें: http://stackoverflow.com/q/1566595/265877 – Alex

1

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

+0

वह तब होता है जब आप कोड के माध्यम से 'चेक' विशेषता सेट करते हैं। लेकिन कोड के माध्यम से क्लिक करना चाहिए - http://jsfiddle.net/FloydPink/sBJ8L/ –

0

ठीक है, मुझे लगता है कि मुझे उस व्यक्तिगत पृष्ठ पर केवल उस कार्यक्षमता की आवश्यकता है, मैं आसानी से बाहर निकल गया हूं और कस्टम क्लिक ईवेंट को एक साथ लॉन्च करने की कोशिश से बचा हूं।

एक कॉफी के बाद आज सुबह यह एक थोड़ा मेरे लिए स्पष्ट किया गया था। मैंने इस कोड को एक काम के रूप में जोड़ा है।

$(document).ready(function() { 
     $('table#OHTable input[type=checkbox]').attr('checked', 'checked'); 
    }); 

यह केवल मेरी तालिका में सभी मेरे चेक बॉक्स की जाँच करता है, और उचित क्लिक करें घटना अभी भी निकाल दिया जाता है जब मेरे masterCheck इस तथ्य के बाद क्लिक किया जाता है।

2

उदाहरण:

$("#recurrence").trigger('click'); 

नीचे दिए गए चेकबॉक्स राज्य परिवर्तन के बाद निष्पादित किया जाएगा।

$("#recurrence").click(function() { 
    $(this).change(function(){ 
     if (this.checked) { 
      $(".recurr-section").show(); 
     } else { 
      $(".recurr-section").hide(); 
     } 
    });   
}); 
संबंधित मुद्दे