Discussion :

[FzF]

Bonjour,

J'essaie de jouer avec la méthode .clone() pour créer des éléments de formulaire identiques mais le thème appliqué à mes éléments n'est pas cloné... Et impossible de l'appliquer après coup.

J'ai mis un exemple sur jsFiddle : http://jsfiddle.net/JbHnh/

Ce que j'essaie de faire, c'est qu'en cliquant sur "Add", mon select soit dupliqué à l'identique, dans le même div que le premier. Et évidemment : que chaque select soit indépendant : pouvoir sélectionner une valeur dans l'un et une autre valeur dans l'autre. La "clonage" fonctionne, mais je ne comprend pas pourquoi le data-theme n'est pas appliqué, malgré le paramètre passé à clone().

Le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form id="formHU">
    <div class="ui-grid-a" id="blkSaisie">
        <div class="ui-block-a" id="divWin">
            <select data-mini="true" data-theme="a" id="vainqueur1" name="vainqueur[]">
                <option value="play1">Player 1</option>
                <option value="play2">Player 2</option>
                <option value="play3">Player 3</option>
            </select>
        </div>
    </div>
</form>
<div id="blkBtn">
    <div class="ui-grid-a">
        <div class="ui-block-a"> <a id="btnDel" name="btnDel" data-role="button" data-theme="e" data-icon="delete"
            data-inline="true" data-iconpos="left" data-mini="true">Del</a>
 
        </div>
        <div class="ui-block-b"> <a id="btnAdd" name="btnAdd" data-role="button" data-theme="e" data-icon="plus"
            data-inline="true" data-iconpos="left" data-mini="true">Add</a>
 
        </div>
    </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var nbLigne = 1;
$("#btnAdd").click(function () {
    nbLigne++;
    var blkW = $("#vainqueur1").clone(true);
    blkW.attr("id", "vainqueur" + nbLigne);
    $("#divWin").append(blkW);
});
$("#btnDel").click(function () {
    if (nbLigne > 1) {
        $("#vainqueur" + nbLigne).remove();
        nbLigne--;
    }
});

[danielhagnoul]

Bonsoir

Je ne suis pas UI Mobile, mais pour la méthode clone(), essayez avec clone( true, true).

Voir mon plugin dvjhClone : http://danielhagnoul.developpez.com/...lone/clone.php.

[FzF]

Bonjour,

C'est déjà la méthode que j'emploie : .clone(true) équivaut à .clone(true, true) (le second paramètre étant initialisé par défaut à la valeur du premier).

D'autres pistes ?