Bind 'Touchstart' Ereignis in jQuery funktioniert nicht mit Android Phonegap und Backbone

Question

Ich habe die folgende Vorlage in Backbone, wird alles perfekt gerendert.

<a href="#list" data-role="button" id="button" class="all-unselected"></a> 
    <a href="#" data-role="button" id="button" class="suggested-unselected"></a> 
    <a href="#" data-role="button" id="button" class="friends-unselected"></a> 
    <a href="#" data-role="button" id="button" class="private-unselected"></a> 
    <a href="#" data-role="button" id="button" class="buzz-unselected"></a> 
    <script type="text/javascript"> 
     var buttons = $("a#button"); 

     for(var i=0; i<buttons.length; i++){ 
      $(buttons[i]).bind('touchstart', select, false); 
      $(buttons[i]).bind('touchend', unselect, false); 
     } 

     function select(){ 
      alert('test'); 
     } 
     function unselect(){ 
      alert('unselect'); 
     } 
    </script> 

Die Berührungsstart jedoch nicht ausgelöst wird, wenn ich folgendes schreiben:

<a href="#" data-role="button" id="button1" class="suggested-unselected"></a> 
    <script type="text/javascript"> 
      document.getElementById('button1').addEventListener('touchstart', select, false); 

     function select(){ 
      alert('test'); 
     } 
     function unselect(){ 
      alert('unselect'); 
     } 
    </script> 

es funktioniert. Als ob jQuery das Ereignis nicht binden kann. Was könnte das Problem sein?

Answer 1

Es gibt ein paar Probleme in Ihrem Code.

Zu allererst:

var buttons = $("a#button"); 

Dies wählt ein Ankerelement mit der ID button. Da ids eindeutig sein sollten, sollte nur ein Element zurückgegeben werden. Sie versuchen jedoch, den zurückgegebenen Wert zu durchlaufen. Das sollte nicht so funktionieren, wie Sie es versuchen.

Zweitens:

Wenn Sie eine Reihe von jQuery-Objekt, das Sie gewählt haben Sie in der Regel .each() verwenden, um über sie zu wechseln. Wenn Sie jedoch versuchen, einen Event-Handler an eine Menge von Objekten zu binden, müssen Sie dies nicht einmal in einer Schleife tun, da jQuery in der Lage ist, ein Event an eine Selektion zu binden.

Drittens:

.bind() -ing funktioniert anders, Sie mischen .bind() - Syntax mit addEventListener Syntax.

Also, Ihre Arbeit nicht-jQuery-Beispiel zu übersetzen (es ist nicht schlecht btw nicht jQuery verwenden) in jQuery würde dies wie folgt aussehen:

$('#button1').bind('touchstart', select); 
$('#button1').bind('touchend', unselect); 

function select(){ 
alert('test'); 
} 

function unselect(){ 
alert('unselect'); 
}