jQuery Mobile Styling DOM

Question

En utilisant JQM 1,3

Dans mon balisage intérieur contenu Je:

<div class="simpleCart_items" ></div> 

Ce div sera rempli en utilisant le contenu d'un fichier javascript. En fait, il va sortir les éléments qui ont été ajoutés à une liste de panier.

Il y a aussi ce lien "supprimer" qui est également généré à côté de chacun des éléments de la liste. Je ne peux pas gaspiller l'oportunité de style ce lien avec un joli bouton mini JQM que vous pouvez afficher avec ce code:

<a href="index.html" data-role="button" data-icon="Remove" data-iconpos="notext">Delete</a> 

A l'intérieur du javascript j'ai trouvé la ligne qui est en charge de générer ce lien de suppression.

remove: function (item, column) { 
        return "<a href='javascript:;' class='" + namespace + "_remove'>" + (column.text || "X") + "</a>"; 
      } 

Sur Firebug cette ligne de sortie comme ceci:

<div class="item-remove"> 
<a class="simpleCart_remove" href="javascript:;">Remove</a> 
</div> 

En tant que débutant total des événements et DOM je pensais « hey, pourquoi ne pas vous ajoutez cette atributs données rôle à ce javascript ligne ?" Vous savez que ça ne marchera pas comme ça.

J'ai lu que cette balise de lien n'est pas prise en compte par les styles JQM lorsque la page se charge pour quelque raison que ce soit. Après avoir tout essayé, je renonce à le faire par moi-même. Si vous sortez avec un script, dites-moi, s'il vous plait, où le placer, cela pourrait affecter les résultats.

Answer 1

En jQM après avoir ajouté un bouton par programme, vous devez appeler la méthode refresh pour permettre à jQM d'améliorer son balisage.

$("<a href='#' data-role='button' data-icon='delete' data-iconpos='notext' data-inline='true' class='simpleCart_remove'>Remove</a>") 
    .appendTo("div.simpleCart_items") 
    .buttonMarkup('refresh'); 

Ici travaille jsFiddle

Dans l'exemple jsFiddle j'ai changé <a> à <button> (BTW il est plus succinct) de jouer bien avec un ListView et lier un événement click pour supprimer les éléments.