webentwicklung-frage-antwort-db.com.de

jQueryMobile fügt einem Button ein Klick-Ereignis hinzu, anstatt die Seite zu wechseln

<p><a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="a" onclick="doSomething(); return false">VERIFY</a></p>

Ich verwende den obigen Code, bei dem es sich um eine jQM-Schaltfläche mit der Einstellung onClick () handelt. Der Onclick wird aufgerufen und doSomething () wird ausgeführt. Danach zeigt jQM die Meldung "Fehler beim Laden der Seite" an.

Wie kann ich den Fehler unterdrücken? In diesem Fall möchte ich die jQM-Taste, die Seite aber nicht ändern.

Vielen Dank

28
RandomCoder

Da Sie jQuery verwenden, würde ich empfehlen, jQuery zu verwenden, um Ihre Ereignisse ebenfalls zu verbinden. Wenn dies gesagt wird, sollte e.preventDefault(); und e.stopImmediatePropagation(); die Ausführung der Standardaktion für <a/> von jQuery mobile unterbinden.

$("#verify").click(function (e) {
    e.stopImmediatePropagation();
    e.preventDefault();
    //Do important stuff....
});

Update  

Der beste Weg, Ihr vorhandenes Markup zu verwenden, wäre, einfach rel="external" zu Ihrem <a/> hinzuzufügen. Und Ihre onclick sollte sich korrekt verhalten.

<p>
  <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="a" onclick="doSomething(); return false" rel="external">VERIFY</a>
</p>

Dies funktioniert, da jQuery Mobile den Link als normalen <a/>-Tag behandelt und false zurückgibt, um die Standardaktion einfach zu stoppen.

44
Mark Coleman

Ich denke, Ihr Problem ist, dass Sie mehrere Aktionen für Ihre Schaltfläche haben und ein Ankertag verwenden. Wenn Sie auf die Schaltfläche klicken, rufen Sie die Seite auf, um zu index.html und einem onClick-Ereignis zu wechseln.

<a 
    href="index.html"                       <-- go to index.html
    data-role="button" 
    data-icon="arrow-r" 
    data-iconpos="right" 
    data-theme="a" 
    onclick="doSomething(); return false">  <-- Click event
VERIFY
</a>

Möglicherweise versuchen (möglicherweise müssen einige andere Attribute entfernt/hinzugefügt werden)

<input
    type="button"
    name="verify"
    id="verify"
    data-icon="arrow-r" 
    data-iconpos="right" 
    data-theme="a" 
    value="VERIFY" />

und fügen Sie jetzt ein Klickereignis hinzu

$('#verify').click(function() {
    alert('Button has been clicked');
});

Live-Beispiel: http://jsfiddle.net/vRr82/2/

6
Phill Pafford

Ich denke, Sie sollten data-ajax="false" im Anker-Tag ... anhängen, da in jQuery mobile der Seitenübergang von AJAX erfolgt und für den Seitenübergangit false ist.

0
Manish Agrawal