jQuery के यूआई टॉगल बटन (चेक बॉक्स) पर क्लिक करें/खींचें बग

Question

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

प्रकार चेकबॉक्स का एक इनपुट एक jQuery ui बटन में बदल जाती है, मैं देखा है (जैसा कि others है) है कि यह केवल एक क्लिक दर्ज करता है, तो माउस पूरी तरह से अभी भी है, जबकि पर क्लिक रखा जाता है। कोई भी आंदोलन जो कभी-कभी और कुछ नहीं होता है। उपयोगकर्ता को यह केवल flaky और अविश्वसनीय व्यवहार के रूप में माना जा सकता है।

कैसे अन्य लोगों को इस व्यवहार के आसपास काम करते हैं (क्रोम 14 में jQuery 1.6.3/jQuery ui 1.8.16 के साथ मनाया और यानी 8)? मैं ऐसे हद तक जाने के लिए अपेक्षित व्यवहार प्राप्त करने के लिए के बाद से मुझे याद आ रही वहाँ कुछ स्पष्ट है?

Answer 1

मैं jQuery ui ऊपर लिंक किए गए पृष्ठ पर एक मुद्दा रिपोर्ट से इस समाधान के लिए विचार आया, लेकिन यह काम का एक सा की जरूरत: jsfiddle

मैं लेबल पर एक क्लिक श्रोता देते हैं और राज्य परिवर्तन संभाल खुद। मुझे टॉगल बटन पर टेक्स्ट चयन को रोकने के लिए भी आवश्यक पाया गया। यह सीएसएस के साथ किया जाता (में पाया गया कि इतने पर कहीं और)

.unselectable { 
    -moz-user-select: -moz-none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
} 

हो सकता है कि यह अगले व्यक्ति jQuery ui टॉगल बटन कुछ समय और दु: ख का उपयोग करना चाहता है कि बचा सकता है। अगर किसी के पास बेहतर/क्लीनर समाधान है, तो मुझे बहुत दिलचस्पी है!

Answer 2

वास्तव में, 1.8.13 और पिछले संस्करणों में एक बग है। यदि आप किसी बटन पर क्लिक करते हैं और अपना कर्सर ले जाएं/खींचें, तो एक बटन दृश्यमान रूप से एक चयनित स्थिति प्राप्त करता है, लेकिन अंतर्निहित चेकबॉक्स/रेडियो का चयन नहीं किया जाता है। परिणामस्वरूप, सर्वर के लिए भेजा प्रपत्र डेटा क्या उपयोगकर्ता देखता साथ असंगत है।

संस्करण 1.8.14 इस बग से हल किया जाता है। नकारात्मकता यह है कि आपको अपना माउस अभी भी रखना है। इसे ध्यान में रखें, यदि आप jquery-ui के पुराने संस्करण का उपयोग करने का निर्णय लेते हैं।

Answer 3

मैं जानता हूँ कि यह एक बहुत पुराना सवाल है, और के बाद से निर्धारित किया गया है, लेकिन मैं यह केवल ठीक है कि मेरे लिए काम किया हो पाया:

http://ultcombo.github.com/UltButtons/

उम्मीद है कि jQuery वास्तविक मुद्दा जल्द ही ठीक कर देंगे ।

Answer 4

मेरे पास बूटस्ट्रैप ढांचे का उपयोग कर एक समान स्थिति है, और जो समाधान मैंने पाया वह बिल्कुल सुंदर नहीं है, लेकिन यह मेरे लिए चाल करता है।

मैं मैन्युअल रूप से हर शामिल तत्व के लिए निम्न कोड जोड़ने के लिए:

.on('mousedown', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false }) 

उदाहरण: जावास्क्रिप्ट में, जब मैं एक संवाद बॉक्स में बटन जोड़ने jQuery का उपयोग करें:

.append($(document.createElement('a')) 
    .attr({'class': 'btn', 'href': '#'}) 
    .append($(document.createTextNode('1'))) 
    .on('mousedown', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false }) 
) 

या एचटीएमएल में इनलाइन:

<a class="btn" href="#" onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false" onclick="UseButton(this); return false;" >1</a> 

मैंने इसे jQuery के साथ जोड़ने का प्रयास किया fter बटन बनाया गया:

.on('mousedown', 'a.btn', function(ev) { ev.preventDefault [...] }) 

लेकिन यह सिर्फ काम नहीं करता है - यह जाहिरा तौर पर तत्व को सीधे जोड़ा जाना आवश्यक है।

जैसा कि मैंने कहा, सुंदर नहीं, लेकिन कम से कम फ़ायरफ़ॉक्स में यह एक आकर्षण की तरह काम करता है।

Answer 5

पुराना सवाल, लेकिन मैंने सोचा कि मैं इसे पोस्ट करूँगा क्योंकि मेरे पास एक ही सवाल था और मेरा रास्ता यहां बनाया गया था --- यहां jQuery 12 UIडेमो में दिखाए गए jQuery UI बटन के व्यवहार से निर्णय लेना, ऐसा लगता है v1.10.4 में तय किया गया है। यहां बग टिकट है - http://bugs.jqueryui.com/ticket/7665। रेडियो बटन & चेक बॉक्स नाबालिग माउस आंदोलनों के लिए mouseclicks उपेक्षा: http://jqueryui.com/changelog/1.10.4/

फिक्स्ड - और यहाँ v1.10.4 के लिए बदलाव का है। (# 7665, 52e0f76)

अभी भी यह हालांकि क्लिक करें घटना फायरिंग नहीं की एक सवाल है।

Answer 6

मैं बस इस पर भी आया। ऐसा लगता है कि यद्यपि यह कुछ ब्राउज़रों के साथ Jquery UI में तय किया जा सकता है, फिर भी यह फ़ायरफ़ॉक्स में विफल रहता है। मैंने जो देखा है, यदि आप माउस को ले जाने के दौरान बटन पर क्लिक करते हैं, तो बटन रंग बदलता है, लेकिन "इनपुट" का वास्तविक मान कभी नहीं बदलता है। तो आप "चेंज" ईवेंट का उपयोग नहीं कर सकते हैं, लेकिन इसके बजाय "क्लिक" ईवेंट का उपयोग करना चाहिए, और देखें कि यह वास्तव में बदलता है या नहीं। मैंने जो किया है, उसमें क्लिक ईवेंट होने पर रीफ्रेश अधिकार शामिल है। इसलिए यदि इनपुट मान बटन से अलग है, तो यह उपयोगकर्ता को देखता है क्योंकि उन्होंने कभी इसे क्लिक नहीं किया है।

$(function() { $("#myButtonSet").buttonset(); }); 
$('#myButtonSet').on('click',function(){ 
     //This will reset the button back to it's original state if the input does not 
     //match what the user clicked. It is so fast that it seems to the user they never 
     //clicked the button at all, prompting them to do it again. 
    $("input[name='myButtonSetName']").button("refresh"); 
});