L'appel de bouton(“refresh”) sur jQuery mobile bouton casse le style de bouton

Je suis en train de mettre à jour dynamiquement le texte sur jQuery mobile bouton. Le bouton est en fait un lien qui est considéré comme un bouton.

Selon la la documentation de jQuery mobile, vous devriez appeler button("refresh") si vous manipulez le bouton via javascript. Cependant, quand je fais cela, le bouton du style va mais fou - il est réduit à la moitié de la hauteur de et le bouton est de la merde.

Voici un JS Fiddle qui illustre le problème.

Le code est essentiellement comme suit:

$(function() {
    //Buttonize
    var $button = $("#myCrapButton");
    $button.button();

    //Change text on click
    $button.click(function() {
        $button.text("Awesome Button");
        $button.button("refresh");
    });
});

Qui plus est, l'appel de button("refresh") provoque l'erreur javascript: Cannot call method 'removeClass' of undefined.

Je sais que je peux contourner ce problème en manipulant les .ui-btn-text span imbriqué à l'intérieur du bouton; cependant, cela semble être la bonne approche car elle nécessite la connaissance explicite du fonctionnement interne de jquery Mobile.

Quelqu'un peut-il me dire comment obtenir le rafraîchissement de travailler?

À l'aide de versions:

  • jQuery 1.9.1
  • jQuery Mobile 1.3.0 (dans le JSFiddle c'est 1.3.0 version bêta, mais le final a le même comportement).

Merci!

Avez-vous essayé $("[data-role='button']#buttonID").on("click", function() { //code here });
À l'aide de "sur" et "clic" dans ce scénario fait la même chose exacte (voir le documentation sur) - "Cette méthode est un raccourci pour .on('click', handler)".

OriginalL'auteur gerrod | 2013-03-06

  1. 3

    EDIT:

    Désolé de lecture rapide et de ne pas voir que vous avez été à la recherche spécifiquement pour l'actualisation de la fonctionnalité. Comme vous l'hépatite a remarqué jQM n';t offre que sur la balise d'ancrage des boutons.

    Bien une alternative, c'est juste pour remplacer le bouton avec un nouveau et laissez jQM ajouter l'annotation comme avant

    JS

    $(function() {
    //Buttonize
    var $button = $("#myCrapButton");
    var $clone = $button.clone();
    $button.button();

    //Change text on click
    $button.click(function() {
        $clone.text("Awesome Button");
        $clone.button();
        $button.replaceWith($clone);
    });
});

    Espérons que cette aide!

    Original:

    Vous avez juste besoin de faire un trou dans le ajouté la balise que jQM ajoute. 

    <a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">
            Click me!
        </span>
    </span>
</a>

    Vous décidez de changer le texte du bouton:

    <a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    Awesome Button
</a>

    Faire ce que vous perdez l'ajout de balisage jQM a besoin d'afficher le bouton.
    Vous avez besoin de changer la imbriquée durée de texte.

    $(function() {
    //Buttonize
    var $button = $("#myCrapButton");
    $button.button();

    //Change text on click
    $button.click(function() {
        $button.children().children().text("Awesome Button");
    });
});

    pas de rafraichissement nécessaire:

    <a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">
            Awesome Button
        </span>
    </span>
</a>

    Live Exemple:

    Il fonctionne sans actualisation pour les deux, la mienne et la votre. +1
    Essayait d'éviter de manipuler le DOM directement; de plus, le sélecteur est incorrect lorsque le bouton a une icône (voir ma réponse mis à jour pour plus d'explications).
    Question indique clairement qu'il ne voulait pas faire un trou dans le texte et de le mettre à jour manuellement.
    Vous avez raison, un commentaire rapide au lieu d'un vote serait souhaitée lors de la communication de telles erreurs. J'ai mis à jour ma réponse avec une autre solution
    Maintenant qu'il a été corrigé, je vais retirer mon downvote. Le commentaire expliquant la raison de la downvote semble être casher de ce que j'ai lu sur meta. Merci de m'indiquer des exemples où vous avez downvoting une réponse incorrecte est découragé.

    OriginalL'auteur Phill Pafford

  2. 2

    Jamais l'esprit; je viens de trouver ce à le haut de la documentation:

    Note: les Liens de style comme les boutons ont tous les mêmes options visuelles comme
    la vraie forme basé sur les boutons ci-dessous, mais il y a un peu important
    les différences. Basé sur un lien de boutons ne font pas partie de l'plugin bouton et
    seulement utiliser le sous-jacent buttonMarkup plugin pour générer le
    styles de bouton de sorte que le bouton de formulaire méthodes (activer, désactiver, actualisation)
    ne sont pas pris en charge. Si vous avez besoin de désactiver un lien basé sur le bouton (ou tout
    élément), il est possible d'appliquer les handicapés de la classe ui-désactivé
    vous-même avec JavaScript pour obtenir le même effet.

    Bien que ce n'est pas réellement résoudre mon problème (comment mettre à jour le texte du bouton) - au moins c'réponses à la question pourquoi le "rafraîchir" la méthode n'est pas pris en charge.

    Edit:

    Je suis conscient que je peux directement mise à jour le texte sur le bouton, je l'ai dit, autant dans la question d'origine:

    Je sais que je peux contourner ce problème en manipulant les
    .ui-btn-texte durée de imbriqué à l'intérieur du bouton    ; toutefois, cela semble
    comme l'approche erronée car elle nécessite la connaissance explicite de la
    fonctionnement interne de jquery Mobile.

    J'espérais éviter cette solution en quelque sorte se "rafraîchir" la méthode de travail. Cependant, d'après l'extrait de la documentation que j'ai trouvé plus tard (et ont cité ci-dessus), j'ai réalisé qu'à l'aide de la "rafraîchir" la méthode n'est pas une option.

    Étant donné que; j'avais toujours l'espoir, il y a une autre manière de mettre à jour le texte sur le bouton sans aborder explicitement la générées éléments du DOM (c'est à dire en utilisant le jQM API) - mais pour autant que je peux voir, il n'y a pas de méthode d'API pour le faire. La mise à jour d'éléments DOM semble que la seule façon d'atteindre le résultat souhaité.

    Les deux sélecteurs fournis par @Phil Pafford ($(this).find('span span')) et @OmarNew2PHP ($button.children().children()) sont (à mon avis) incorrect. Oui, ils fonctionnent parfaitement dans l'exemple donné ci-dessus, cependant, si vous ajoutez une icône pour le bouton:

    <a id="myCrapButton" href="#" data-icon="delete">Click me!</a>

    Puis jQM ajoute dans une autre span pour afficher l'icône (ancre attributs de la balise revues à la baisse pour des raisons de concision):

    <a href="#">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Delete</span>
        <span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span>
    </span>
</a>

    En utilisant les sélecteurs ci-dessus va ajouter le texte à les deux de l'intérieur de la span balises. C'est un autre exemple de ce que j'espérais éviter de mettre à jour le DOM directement - parce que vous ne pouvez pas (et ne devrait pas le faire) prévoir ce que jQM va générer.

    Mais, à la fin de la journée, il semble que la meilleure façon de mettre à jour le texte à l'intérieur du bouton à l'aide de la méthode que j'espérais éviter:

    $button.click(function() {
    $(".ui-btn-text", this).text("Awesome Button");
});

    Merci pour vos réponses.

    Mec, vous êtes l'homme. Merci pour ce suivi. J'espère être de la migration à 1,4 très bientôt.

    OriginalL'auteur gerrod

  3. 1

    J'ai passé des heures sur ce sujet et finalement cela a fonctionné pour moi. Type de solution propre.
    Donc, si vous avez un javascript qui est de la création html suivant dans un élément 

    <div id="buttonParent">
  <a href='#' id="1_button" data-role="button">Click me</a>
  <a href='#' id="2_button" data-role="button">Another Click me</a>
</div>

    puis de l'appel ci-dessous permettra d'actualiser les boutons.

    jQuery('#buttonParent').trigger('create');

    Veuillez noter ci-dessous ne travaillait pas et était en train de donner des exceptions.

    jQuery('#1_button').button('refresh')

    Peut aider quelqu'un d'autre comme moi. C'était un cisaillement perte de temps. jqm besoins de corriger ce bug. J'ai eu un wrapper autour de ces bouton pour un collapsibleset et d'actualisation sur qui a bien fonctionné mais cette actualisation sur le bouton gardé de jeter des erreurs. C'était très ennuyeux.

    Grâce Hitesh Patel!

    OriginalL'auteur HITESH PATEL