2011-11-18 21 views
10

में अपेक्षित के रूप में काम नहीं कर रहे बटन पर jQuery ईवेंट बुलबुले मेरे पास <button> तत्व है जिसके अंदर मेरे पास 2 <span> तत्व हैं। मेरे पास प्रत्येक अवधि तत्वों के लिए 2 संलग्न jquery क्लिक ईवेंट हैंडलर हैं, इसलिए मैं प्रत्येक क्लिक के लिए जो भी चाहूं कर सकता हूं। यहाँ बुनियादी कोड का एक संक्षिप्त वर्णन दिया गया:फ़ायरफ़ॉक्स

एचटीएमएल

<button> 
    <span>Text1</span> 
    <span>Text2</span> 
</button> 

जावास्क्रिप्ट

$(function() { 
    $('button').bind('click', function() { 
     console.log('button clicked'); 
    }); 
    $('button > span:eq(0)').bind('click', function() { 
     console.log('text1 span clicked'); 
    }); 
    $('button > span:eq(1)').bind('click', function() { 
     console.log('text2 span clicked'); 
    }); 
}); 

यह क्रोम में सभी ठीक काम कर रहा है और क्लिक करें घटना को सही क्रम में कब्जा कर लिया है : पहले किसी भी अवधि तत्वों पर और फिर ईवेंट पैरेंट बटन तत्व पर बुलबुले।

समस्या यह है कि फ़ायरफ़ॉक्स में क्लिक ईवेंट किसी भी अवधि के तत्वों के लिए आग नहीं लगाता है, बस बटन ईवेंट हैंडलर ईवेंट को निकाल दिया जाता है।

यहाँ एक बेला, ताकि आप देख सकते हैं कि मैं क्या मतलब है: http://jsfiddle.net/spider/RGL7a/2/

धन्यवाद

+0

मुझे लगता है कि यह कभी हल नहीं हुआ था? – Shane

+0

@Shane दुर्भाग्यवश कोई और मैंने जो देखा है उससे कभी नहीं हो सकता है, क्योंकि यह अभी भी नवीनतम फ़ायरफ़ॉक्स संस्करण में काम नहीं करता है। बूटस्ट्रैप जैसे फ्रेमवर्क [दो अलग-अलग बटन] (http://getbootstrap.com/components/#btn-dropdowns-split) का उपयोग कर ऐसा करते हैं। और फाउंडेशन या वाईयूआई जैसे अन्य ढांचे इस ** स्प्लिट बटन ** कार्यक्षमता ([फाउंडेशन उदाहरण] (http://foundation.zurb.com/docs/components/split_buttons.html) और [YUI उदाहरण) को अनुकरण करने के लिए पूरी तरह से अन्य मार्कअप का उपयोग करते हैं। ] (http://yuilibrary.com/yui/docs/node-menunav/node-menunav-4.html))। – Bogdan

+0

मैं आमतौर पर इस तरह की कार्यक्षमता के लिए बूस्ट्रैप का उपयोग करता हूं और जहां यह कोई विकल्प नहीं है, मैं अपनी रणनीति का उपयोग करता हूं क्योंकि यह मार्कअप अर्थात् के मामले में सबसे अच्छा लगता है। – Bogdan

उत्तर

3

एक सरल समाधान के लिए एक बटन तत्व के बजाय एक <div> तत्व का उपयोग करने के लिए होगा। उस सामान्य कोड को रखें जिसे आप फ़ंक्शन में निकालना चाहते हैं और उसके बाद फ़ंक्शन निष्पादित करते हैं जब किसी भी स्पैन के साथ-साथ अवधि के अद्वितीय कोड पर क्लिक किया जाता है। आप और अधिक 508 आज्ञाकारी बनना चाहता था, तो आप स्पष्ट रूप से <a> टैग (या यहां तक ​​कि <button> टैग में फैला बना सकता है।

, कि एफएफ घटना से निपटने की व्याख्या नहीं करता, लेकिन यह जाने के लिए एक तेज तरीका हो सकता है।

+0

सुझाव के लिए बेन धन्यवाद। हां, आप जो कह रहे हैं वह समस्या का एक वैकल्पिक समाधान है, जिसे मैं जानता हूं और काम करता हूं। मैं अभी भी 'div' के बजाय' div' के बजाय 'बटन' का उपयोग करने के लिए प्रीफ़र (यदि संभव हो) प्रीफर करूँगा, क्योंकि यह एक div होने की तुलना में 2 क्रियाओं (एक प्राथमिक और एक माध्यमिक) वाले बटन के लिए अधिक पठनीय और अर्थात् सही लगता है अंदर 2 बटन के साथ। खासकर जब से मेरे सीएसएस नियम इसे स्टाइल करते हैं क्योंकि मेरे नियमित (सिंगल एक्शन) बटनों में से कोई भी लंबवत विभाजक द्वारा विभाजित होता है। अगर मुझे कोई समाधान नहीं मिलेगा तो मुझे यह समझौता करना होगा और divs के साथ जाना होगा। धन्यवाद फिर से – Bogdan

-1

बदलते

<button> to <button type="button"> 

इस बल्ले से अपनी समस्या का समाधान करना चाहिए की कोशिश करो। कारण अपने काम नहीं कर रहा है इसकी एक बटन, प्रस्तुत करने के लिए है, जिनमें से डिफ़ॉल्ट कार्रवाई के साथ के माध्यम से निम्नलिखित क्योंकि। यानी बटन जावास्क्रिप्ट में झूठी वापसी की आवश्यकता होगी इसके लिए अपने क्लिक को पढ़ने के लिए। जैसे कि आप एक लिंक पर कोशिश करने और क्लिक करने के लिए थे झूठी वापसी के लिए अपनी डिफ़ॉल्ट कार्रवाई सेट आउट।

यदि आप अपने जेएस में jQuery कोड की निम्न पंक्ति जोड़ते हैं, तो यह आपकी समस्या को भी हल करना चाहिए। अपने बटन से पहले कोड जोड़ना सुनिश्चित करें> स्पैन बाध्य क्लिक करें।

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

आशा इस मदद करता है।

-D

+0

सुझावों के लिए धन्यवाद, लेकिन उनमें से कोई भी समस्या हल नहीं करता है (मैंने प्रश्न पोस्ट करने से पहले 'टाइप = "बटन" खुद को कोशिश की, लेकिन इसे मेरे उदाहरण में शामिल नहीं किया क्योंकि इससे कोई फर्क नहीं पड़ता)। ऐसा लगता है कि फ़ायरफ़ॉक्स पर, क्लिक इवेंट केवल 'बटन' तत्व द्वारा कैप्चर किया जाता है, न कि किसी भी बच्चे तत्व द्वारा। – Bogdan