0

フリップ スイッチがほとんどないドメイン リスト (li) があるカスタム Jquery モバイル リストを作成しています。

フリップ スイッチを動的に作成しています。作成時に一意の ID が割り当てられました。作成時に確認したところ、すべてが一意の ID を持っています。フリップ スイッチを作成した後、リスト アイテムに追加しています。

リストを更新すると、他のフリップ ボックスと同じ ID を持つフリップ ボックスが表示されます。作成時に確認しましたが問題ありませんでした。作成後、不正な形式になりました。

Foundation JS を使用してグリッドを構築しています。

これを行う JavaScript コードは、

for(var currentIndex = 0; currentIndex < myArray.length ; currentIndex ++){

    var currentField =  myArray[currentIndex];

    $('#my-list').append('<li data-role="list-divider" class="my-list-by-domain">'+currentField.Name+'</li>');

    for(var domainCount = 0; domainCount < (currentField.UserGoals).length ; domainCount++) {

        var currentMyGoalField = (currentField.UserGoals)[domainCount];

        var myGoalsDataElement = $(".my-goals-content-template .my-goals-data-row").clone();

        var switchElement =  ('<fieldset><div data-role="fieldcontain">' +

            '<select class="my-goals-flip-switch" data-role="flipswitch" onchange="goalOnChange(' + currentMyGoalField.UserGoalId + ')" ' +

            'id="my-goals-toggle-' + currentMyGoalField.UserGoalId + '">' +

            '<option value="true">Yes</option>' +

            '<option value="false">No</option>' +

            '</select></div>' +

            '</fieldset>');

        $(".my-goals-label", myGoalsDataElement).text(currentMyGoalField.Name);

        $("#my-goals-complete-check").empty();

        $("#my-goals-complete-check").append(switchElement);

        $('#my-goal-list').append(myGoalsDataElement).enhanceWithin();

    }

}

同じための HTML コンテナは、

<div class="my-goals-content-template" style="display: none">

    <div class="row my-goals-data-row">

        <div class="small-9 medium-10 large-10 columns my-goals-label"></div>

        <div class=" small-3 medium-2 large-2 columns">

            <div id="my-goals-complete-check">

            </div>

        </div>

    </div>

</div>

誰でもこれを理解するのを手伝ってくれますか。

4

1 に答える 1

0

問題が見つかりました。

実際には、コントロールが存在するコンテナーを指定する必要があります。

修正は、

$("#my-goals-complete-check",myGoalsDataElement).empty();

$("#my-goals-complete-check",myGoalsDataElement).append(switchElement);
于 2015-11-06T06:40:08.197 に答える