2012-05-30 25 views
5

पर क्लिक करें मेरे पास एक पंक्ति है। पंक्ति में एक टीडी है (इसमें एक चेकबॉक्स के साथ) और टीडी पर मेरे पास एक क्लिक फ़ंक्शन है। ताकि जब टीडी क्लिक किया गया हो तो चेकबॉक्स चेक/अनचेक हो जाएगा।knockoutjs चेकबॉक्स और पैरेंट टीडी

जब मैं टीडी पर क्लिक करें, लेकिन जब चेकबॉक्स पर क्लिक (दृश्य) चेकबॉक्स का मूल्य बदल नहीं करता है (यह/चेक नहीं किया गया हो जाता है अनियंत्रित)

वांछित स्थिति है यह ठीक काम करता है:

  1. जब मैं चेकबॉक्स, (दृश्य) चेकबॉक्स परिवर्तन का मूल्य क्लिक करें और मैं एक समारोह कॉल कर सकते हैं। (उदाहरण के लिए एक AJAX कॉल करने के लिए के लिए)

  2. जब मैं टीडी पर क्लिक करें, (दृश्य) चेकबॉक्स परिवर्तन का मूल्य और मैं एक कॉल कर सकता हूं समारोह। (उदाहरण के लिए AJAX कॉल करने के लिए)

हम इसे कैसे प्राप्त कर सकते हैं?

Sample Code

उत्तर

1

क्लिक करें घटना के मुद्दों से बचने के लिए, एक बड़े क्षेत्र क्लिक करने योग्य बनाने के लिए label तत्व का उपयोग करें। यहाँ मैं लेबल एक ब्लॉक तत्व बनाया है तो यह पूरे td तक ले जाता है:

<td> 
    <label style="display: block"> 
     <input type="checkbox" data-bind="checked: checkBox" /> 
    </label> 
</td> 

http://jsfiddle.net/mbest/LsxSh/

+0

धन्यवाद !! यह चाल है। मैंने एक क्लिक फ़ंक्शन जोड़कर थोड़ा संपादित किया है। [Http://jsfiddle.net/LsxSh/4/](http://jsfiddle.net/LsxSh/4/) – Blottt

0

चेक बॉक्स क्लिक टीडी के लिए क्लिक हाथ के बल्लेबाज कोड का आह्वान:

self.checkBox(!self.checkBox()); 

इस चेक को हटा।

+0

यह सच है देखो, अब यह प्रश्न पूछते हैं कि यह कैसे बच सकते हैं है। मैं निर्दिष्ट करता हूं कि मैं वास्तव में पहली पोस्ट में क्या देख रहा हूं। – Blottt

+0

आपने प्रश्न बदल दिया :-) –

+0

हाँ: पी ... यह ठीक तरह से गठित नहीं किया गया था। – Blottt

1

टीडी घटना इनपुट का चेक क्लिक करें घटना अधिभावी किया जा रहा है

10

समस्या यह है कि TD आग के लिए क्लिक हैंडलर भी जब आप checkbox, जो checkbox दोनों डिफ़ॉल्ट क्लिक हैंडलर से बदल जाती है इसका मतलब क्लिक करें checkbox और TD के लिए आपके कस्टम क्लिक हैंडलर (वे एक-दूसरे से प्रतिक्रिया करते हैं) के लिए। समाधान checkbox पर TD पर बुलबुले से क्लिक को रोकने के लिए है। आप इस बाध्यकारी के साथ नॉकआउट में ऐसा कर सकते हैं: click:function(){return true}, clickBubble:false

यहाँ यह कार्रवाई में है: http://jsfiddle.net/mbest/Eatdh/12/

मुझे लगता है कि है, तथापि, कि एक label का उपयोग कर एक बेहतर दृष्टिकोण (मेरे अन्य जवाब देखें)।

+0

मैं इसे पसंद करता हूं क्योंकि यह अतिरिक्त HTML अव्यवस्था को रोकता है। – Tyrsius

+1

'लेबल' प्रश्न में परिदृश्य के लिए एक बेहतर दृष्टिकोण हो सकता है, लेकिन यह वही समाधान है जिसकी मुझे आवश्यकता है क्योंकि मेरा क्लिक हैंडलर पूरे 'tr' पर है। –

0

यह काफी सूखी नहीं है, लेकिन इसकी त्वरित और कार्यात्मक: fiddle

<td data-bind="click:tdClick"> 
     <input type="checkbox" data-bind="checked: checkBox, click:tdClick" /> 
</td> 
+2

यहां एक वैकल्पिक विधि है जो काम भी करती है: चेकबॉक्स पर डेटा बाध्य करें 'चेकबॉक्स: क्लिक करें: फ़ंक्शन() {सत्य वापस;}, क्लिक करें बबल: झूठा'। आपके चेकबॉक्स को अनचेक किए जाने पर चेक किया जाता है और फिर जब आप उस पर क्लिक करते हैं तो फिर से चेक किया जाता है। –

+0

@ माइकलबेस्ट मुझे लगता है कि अब तक का सबसे अच्छा समाधान है। इसे उत्तर के रूप में क्यों पोस्ट न करें? – Tyrsius

+0

दाएं। मैं इसे अपने उत्तर में जोड़ दूंगा। –

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