jQueryMobile ajoute un événement de clic à un bouton au lieu de changer de page

Question

<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>

J'utilise le code ci-dessus qui est un bouton jQM avec le paramètre onClick(). L'onclick est appelé et doSomething() est exécuté mais après cela, jQM affiche le message "error loading page".

Comment puis-je supprimer l'erreur ? Dans ce cas, je veux le bouton jQM mais je ne veux pas qu'il change de page.

Merci

Answer 1

Puisque vous utilisez jQuery, je vous recommande d'utiliser également jQuery pour câbler vos événements. Ceci étant dit, utiliser e.preventDefault(); y e.stopImmediatePropagation(); devrait empêcher jQuery mobile d'exécuter l'action par défaut sur l'objet <a/> .

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

Mise à jour

La meilleure façon d'utiliser votre balisage existant serait d'ajouter simplement rel="external" à votre <a/> Et votre onclick devrait se comporter correctement.

<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>

Cela fonctionnera puisque jQuery Mobile traitera le lien comme un lien normal. <a/> et renvoyer false arrêtera simplement l'action par défaut.

Answer 2

Je pense que votre problème est que vous avez plusieurs actions sur votre bouton et que vous utilisez une balise d'ancrage. Lorsque vous cliquez sur le bouton, vous demandez à la page de passer à index.html et à un événement onClick.

<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>

On peut essayer (il faudra peut-être supprimer/ajouté d'autres attributs)

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

et maintenant ajouter un événement de clic

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

Exemple en direct : http://jsfiddle.net/vRr82/2/

Answer 3

Je pense que vous devriez ajouter data-ajax="false" à l'intérieur de la balise d'ancrage parce que dans jQuery mobile la transition de page est faite par AJAX, et pour la transition de page il doit être faux

Answer 4

Utilisez la fonction live de Jquery. C'est très utile pour moi.