Groupe de contrôle dynamique et cases à cocher non stylées

Donc je suis en train de charger du contenu dynamique directement dans mon case contenant (group_checkboxes)

<div id='group_checkboxes' data-role="fieldcontain">

</div>

C'est la déclaration que je suis en cours d'exécution pour remplir le conteneur:

$('#group_checkboxes').append('<fieldset data-role="controlgroup"><input type="checkbox" name="' + $(this).find('data').text() + '" class="custom" /><label for="' + $(this).find('data').text() + '">' + $(this).find('label').text() + '</label></fieldset>');

Les cases sont toutes peuplé, mais le jQuery, le style n'est pas appliquée.

Selon la docs tout ce que je dois faire est d'appeler cette fonction pour mettre à jour la case à cocher style...

$("input[type='checkbox']").checkboxradio("refresh");

Qui ne fonctionne pas bien... une idée de ce que je fais mal?

source d'informationauteur Eric Franklin

  1. 7

    Essayez d'abord de leur propre statique de code de démonstration:

    <div  data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                    <legend>Choose as many snacks as you'd like:</legend>
                    <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
                    <label for="checkbox-1a">Cheetos</label>

                    <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
                    <label for="checkbox-2a">Doritos</label>

                    <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
                    <label for="checkbox-3a">Fritos</label>

                    <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
                    <label for="checkbox-4a">Sun Chips</label>
                </fieldset>
            </div>

    Ils sont juste en utilisant un fieldset comme je l'ai mentionné dans les commentaires.

    Si cela fonctionne, puis ajuster votre script pour générer le même balisage dynamiquement et puis les rafraîchir

    $("input[type='checkbox']").checkboxradio("refresh");

    Si cela va fonctionner avec son code, vous saurez que vous avez d'erreur dans le balisage. Si non, il y a une erreur avec cette fonction de rafraîchissement. (Je sais que c'est pas la solution finale, mais vous avez à faire un peu de débogage parfois 🙂

    Edit:

    Trouvé des problèmes similaires, en résolu à l'aide d' Page()

    JQM FAQ

    DONC, la Question

  2. 12

    Lors de l'ajout de cases à cocher ou des boutons radio pour un controlgroup de façon dynamique, vous avez affaire à deux jQuery Mobile widgets, .checkboxradio() et .controlgroup().

    Les deux devraient être créé/modifié/amélioré/style avec jQuery Mobile CSS une fois que de nouveaux éléments sont ajoutés.

    La manière d'y parvenir est différente dans les dernières versions stables et version RC, mais les méthodes sont les mêmes.

    jQuery Mobile 1.2.x - 1.3.x (versions stables)

    Après l'ajout case /bouton radio pour qu'elle soit statique ou dynamique controlgroup.checkboxradio() doit d'abord être appelé à améliorer case /bouton radio balisage et puis .controlgroup("refresh") à re-style controlgroup div.

    $("[type=checkbox]").checkboxradio();
$("[data-role=controlgroup]").controlgroup("refresh");

    Démo

    jQuery Mobile 1.4.x

    La seule différence ici, c'est des éléments qui doit être ajouté à .controlgroup("container")

    $("#foo").controlgroup("container").append(elements);

    puis de l'améliorer à la fois controlgroup et tous les éléments à l'intérieur, à l'aide de .enhanceWithin().

    $("[data-role=controlgroup]").enhanceWithin().controlgroup("refresh");

    Démo

  3. 7

    essayer avec $("#<id of fieldset controlgroup>").trigger("create");

    http://jsfiddle.net/YKvR3/36/

  4. 3

    essayer 

    $('input:checkbox').checkboxradio('refresh');
  5. 1
            <!DOCTYPE HTML>
<html>
<head>
<title>checkbox</title>
<link rel="stylesheet" href="jQuery/css/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="jQuery/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jQuery/js/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript">
var myArray = [];
$(document).ready(function() {
//put all your jQuery goodness in here.
myArray[myArray.length] = 'Item - 0';
checkboxRefresh();
});
function checkboxRefresh(){
var newhtml = "<fieldset data-role=\"controlgroup\">";
newhtml +="<legend>Select items:</legend>" ;
for(var i = 0 ; i < myArray.length; i++){
newhtml += "<input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" />" ;
newhtml += "<label for=\"checkbox-"+i+"a\">"+myArray[i]+"</label>";
}
newhtml +="</fieldset>";
$("#checkboxItems").html(newhtml).page();
//$('input').checkboxradio('disable');
//$('input').checkboxradio('enable');
//$('input').checkboxradio('refresh');
//$('input:checkbox').checkboxradio('refresh');
$("input[type='checkbox']").checkboxradio("refresh");
$('#my-home').page();
}
$('#bAdd').live('click', function () {
myArray[myArray.length] = 'Item - ' + myArray.length;
checkboxRefresh();
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="my-home">
<div id="my-homeheader">
<h1 id="my-logo">checkbox</h1>
</div>
<div data-role="content">
<div id="checkboxItems" data-role="fieldcontain"></div>
<fieldset class="ui-grid-b">
<div data-role="controlgroup" data-type="horizontal">
<a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
</div>
</fieldset>
</div>
</div>
</body>
</html>

    Il fonctionne pour moi. Aucune idée pourquoi?

    La Réponse pour moi est:

    $("input[type='checkbox']").checkboxradio();
  6. 0

    Ce qui pour moi a été de supprimer l'ensemble du fieldset puis remplacez place un nouveau jeu de champs avec le nouvel élément que je voulais ajouter, puis j'ai appelé le .trigger('pagecreate'); méthode sur l'ensemble de la page. Ce n'est pas la solution la plus efficace mais c'est le seul qui a fonctionné dans mon cas.