web-dev-qa-db-fra.com

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

<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 jeu onClick (). OnClick est appelé et doSomething () est exécuté, mais jQM affiche ensuite le message "Erreur lors du chargement de la 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

javascriptjqueryjquery-mobile
28
RandomCoder

Puisque vous utilisez jQuery, je vous recommanderais également d’utiliser jQuery pour connecter vos événements. Cela dit, l'utilisation de e.preventDefault(); et e.stopImmediatePropagation(); devrait empêcher jQuery mobile d'effectuer l'action par défaut sur le <a/>.

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

Mettre à jour  

La meilleure façon d'utiliser votre balisage existant serait simplement d'ajouter 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 car jQuery Mobile traitera le lien comme une balise <a/> normale et renverra false arrêtera simplement l'action par défaut.

44
Mark Coleman

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 appelez la page pour 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>

Peut-être essayer (peut-être besoin de supprimer/ajouter 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/

6
Phill Pafford

Je pense que vous devriez ajouter data-ajax="false" dans la balise d'ancrage ...__ car, dans jQuery mobile, la transition de page est effectuée par AJAX, et pour la transition de pageit doit être faux ..

0
Manish Agrawal