web-dev-qa-db-fra.com

Impossible d'appeler des méthodes avant l'initialisation; a tenté d'appeler la méthode «Actualiser»

Je voudrais mettre à jour la valeur d'un bouton de lien en cliquant sur l'élément d'un menu.

Html:

<div id="menu">
    <ul data-role="listview" data-icon="false">
        <li><a href="#">Value A</a></li>
        <li><a href="#">Value B</a></li>
    </ul>
</div>

<a href="#" id="selected" data-role="button"></a>

jQueryMobile:

$('#selected').hide();

$("#menu li a").on('click',function(){
    $('#selected').html($(this).html()).slideDown().button("refresh");
});

La mise à jour du texte fonctionne bien, mais le bouton css n'est pas correctement mis à jour.

J'obtiens l'erreur suivante:

Erreur non détectée: impossible d'appeler des méthodes sur le bouton avant l'initialisation; a tenté d'appeler la méthode "Actualiser"

De quelle initialisation parlons-nous? La page et le bouton sont déjà initialisés, n'est-ce pas?

ÉDITER:

J'ai également essayé ceci:

$(document).on("mobileinit", function() {

    $('#selected').hide();

    $("#menu li a").on('click',function(){
        $('#selected').html($(this).html()).slideDown().button("refresh");
    });

});

Plus de message d'erreur; mais pas de mise à jour du texte :(

jqueryhtml5css3jquery-mobilebutton
17
Yako

Le problème est parfois causé par un conflit entre les plugins jquery-ui et bootstrap-button. Le code jquery-ui devrait précéder bootstrap.js, et cela résout le problème.

39
Mwirabua Tim

Exemple de travail

Voici un exemple de travail: http://jsfiddle.net/Gajotres/BDmex/

HTML: 

<div id="menu">
    <ul data-role="listview" data-icon="false">
        <li><a href="#">Value A</a></li>
        <li><a href="#">Value B</a></li>
    </ul>
</div>

<a href="#" id="selected" data-role="button"></a>

JS: 

$('#selected').hide();

$("#menu li a").on('click',function(){
    $('#selected').html('<span class="ui-btn-inner"><span class="ui-btn-text">' + $(this).html() + '</span></span>').slideDown();
});
  • Il vous manquait data-role = "button" à l'intérieur d'un bouton d'une balise
  • Parce que le bouton a été créé à l'origine sans le texte, vous devez ajouter la structure interne appropriée avec 2 portées

Deuxième solution

Il existe une autre solution à ce problème et elle peut être trouvée dans cet ARTICLE + description et exemple de travail.

3
Gajotres

Jetez un œil à la structure HTML de votre élément de lien #selected Après que jQuery Mobile l'ait initialisé (à l'aide d'un inspecteur DOM). Le texte réel se trouve dans un élément span avec la classe ui-btn-text. Ainsi, lorsque vous mettez à jour le code HTML du bouton avec la fonction .html(), vous écrasez la structure HTML créée par jQuery Mobile, supprimant ainsi la mise en forme ajoutée par jQuery Mobile.

Vous pouvez sélectionner l'élément .ui-btn-text Qui est un descendant de votre bouton pour mettre à jour le texte sans supprimer la mise en forme.

Change ça:

$('#selected').html($(this).html()).slideDown().button("refresh");

pour ça:

$('#selected').find(".ui-btn-text").html($(this).html()).slideDown();

Pour info, voici à quoi ressemble le code HTML d'un bouton de balise d'ancrage initialisé:

<a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Anchor</span>
    </span>
</a>

Source: http://view.jquerymobile.com/1.3.0/docs/widgets/buttons/

1
Jasper

J'avais le même problème et je n'ai pas réussi à savoir pourquoi cela se produit. Mais sachant qu'après l'initialisation, un span avec la classe 'ui-btn-text' est placé à l'intérieur du bouton, je le contourne comme ceci:

var button = $("#selected");
var innerTextSpan = button.find(".ui-btn-text");

// not initialized - just change label
if (innerTextSpan.size() == 0) {
    button.text(label);

// already initialized - find innerTextSpan and change its label    
} else {
    innerTextSpan.text(label);
}
0
Plamen

J'ai eu le même problème que j'ai résolu en supprimant 2 "" html final, donc je pense que c'est une imperfection dans la page de destination html

0
semion zloi