शेष हाइलाइट किए गए बटन से कैसे रोकें

Question

मेरे पास जावास्क्रिप्ट और jquery (मोबाइल) में मेरा पहला प्रयास है लेकिन अब कुछ ऐसा हुआ है जिसे मैं हल नहीं कर सकता।

मेरे पास 4 बटन के साथ एक साधारण रूप है, जब किसी को एक आदेश पर क्लिक किया जाता है सर्वर (AJAX का उपयोग करके)। चीज इंटरफेस के साथ है, कि बटन क्लिक किया गया (लाइटग्रे से शुरू करने के लिए) नीला हो जाता है और इसकी मूल स्थिति में वापस नहीं आता है। यहां तक ​​कि जब कोई अन्य बटन क्लिक नहीं किया जाता है, तो कुछ क्लिक के बाद, सभी बटन नीले होते हैं।

Here is a link to a test page (ajax विकलांग आदेश के साथ)

और इस पृष्ठ है;

<div id="mainPageHaard" data-role="page"> 

    <div data-role="header" data-position="fixed"> 
     <a href="index.html" data-icon="arrow-l" data-iconpos="notext" >Back</a> 
     <h1>Haard</h1> 
     <a href="index.html" data-icon="home" data-iconpos="notext" >Home</a> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <a id="btnHaardMax" data-role="button" data-icon="arrow-u">Maximaal</a> 
     <a id="btnHaardUp" data-role="button" data-icon="plus">Harder</a> 
     <a id="btnHaardDown" data-role="button" data-icon="minus">Zachter</a> 
     <a id="btnHaardMin" data-role="button" data-icon="arrow-d">Waakvlam</a> 
    </div><!-- /content --> 

    <div data-role="footer" data-position="fixed"> 
     <a href="#configPageHaard" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Config</a> 
    </div><!-- /footer --> 
</div><!-- /page --> 

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

$(document).ready(function() { 

    $("#btnHaardMax").click(function(){ 
     //SendEvent("Gashaard_MAX", 18); 
     return true; 
    }); 
    $("#btnHaardUp").click(function(){ 
     //SendEvent("Gashaard_UP", 18); 
     return true; 
    }); 
    $("#btnHaardDown").click(function(){ 
     //SendEvent("Gashaard_DOWN", 18); 
     return true; 
    }); 
    $("#btnHaardMin").click(function(){ 
     //SendEvent("Gashaard_MIN", 18); 
     return true; 
    }); 
    $("#btnHaardStart").click(function(){ 
     //SendEvent("Gashaard_START", 18); 
     return true; 
    }); 
    $("#btnHaardStop").click(function(){ 
     //SendEvent("Gashaard_STOP", 18); 
     return true; 
    }); 

}); 

मैं इसे कुछ मूर्ख होने के लिए संदेह है, लेकिन अगर किसी ने मेरे कोड

Thx में sillyness पर वास्तव में मुझे इंगित सराहना करेंगे!

Answer 1

लघु जवाब: आप माउस घटना onclick समाप्त हो गया है पर सीएसएस वर्ग ui-btn-active दूर करने के लिए की जरूरत है।

कैसे? तुम कहो?

$().ready(function(){ 
    $('some-selector').mousedown(function(){ 
     $('some-selector').addClass('ui-btn-active'); 
    }) 
    $('some-selector').mouseup(function(){ 
     $('some-selector').removeClass('ui-btn-active'); 
    }) 
    }) 

Answer 2

मैं से बचने के लिए, सुझाव है कि एक बार आप एक बटन दबाते हैं, तो आप इसे अक्षम AJAX कॉल पूरा कर लिया है जब तक आकस्मिक डबल दबा सकता है या अगर यह मतलब नहीं है फिर बटन दबाना है, छोड़ यह अक्षम चूंकि आपके बटन वास्तविक बटन नहीं हैं लेकिन लिंक हैं, how to disable/enable buttons and other form elements देखें। netbrain सुझावों की तरह, आपको सक्रिय या सक्षम होने की तरह दिखने के लिए आपको लिंक के क्लास नामों के साथ अभी भी बेकार होना होगा।

आईएमएचओ, मैं वास्तविक HTML बटन का उपयोग करूंगा।

Answer 3

यह अधिकांश लोगों के लिए यह एक सामान्य सामान्य समाधान होना चाहिए जो इस डिफ़ॉल्ट व्यवहार को नहीं चाहते हैं। ध्यान दें कि आपको normalized vclick event की आवश्यकता है।

$(document).bind("mobileinit", function(){ 
    $("div[data-role=footer] a").live('vclick', function (e) { 
    $(this).removeClass("ui-btn-active"); 
});