0

JQM初心者です。json オブジェクトをループしているときにラジオボタンを追加する際に問題が発生しています。問題は、controlgroup で trigger('create') を実行すると、controlgroup が空のままになることです。

デモ : http://m.dzemo.se/

HTML:

<div data-role="page">

<div data-role="header">
    <h1>Visning</h1>
</div><!-- /header -->

<div data-role="content" id="content">   
    <form action="" method="POST">
        <div class="form-holder left">
            <fieldset data-role="controlgroup" id="visning-dates">
                <h2>Visning:</h2>
            </fieldset>
        </div>

        <div class="form-holder left border-left">
            <h2>Plats</h2>
            <img src="img/map.png" class="map" />
        </div>

        <div class="form-holder left">
            <div class="input-holder">
                <label for="firstname">Förnamn:</label>
                <input type="text" name="firstname" id="firstname" />
            </div>

            <div class="input-holder">
                <label for="phone">Telefon:</label>
                <input type="tel" name="phone" id="phone" />    
            </div>          
        </div>

        <div class="form-holder left border-left">
            <div class="input-holder">
                <label for="lastname">Efternamn:</label>
                <input type="text" name="lastname" id="lastname" />
            </div>

            <div class="input-holder">
                <label for="email">Epost:</label>
                <input type="email" name="email" id="email" />    
            </div>

            <div class="input-holder">
                <input type="submit" name="submit" id="submit" data-theme="b" value="Skicka" />    
            </div>      
        </div>
    </form>
</div><!-- /content -->

<div data-role="footer" data-position="fixed">
    Lite content.
</div>

Javascript:

$(document).bind('pageinit', function() {
var dates = {
    "date" : [
        {
            'day' : 24,
            'month' : 'Oktober',
            'year' : 2012
        },
        {
            'day' : 1,
            'month' : 'Januari',
            'year' : 2013
        }
    ]
};

$.each( dates, function( index, value ){

    $.each( dates[index], function( i, val) {
        var data = '<input type="radio" name="radio-visnings-date" value="' + this.day + ' ' + this.month + ' ' + this.year + '"/><label for="radio-visnings-date">' + this.day + ' ' + this.month + ' ' + this.year + '</label>';

        $('#visning-dates').append( data ).trigger('create');
    });

});

});

データがconsole.logで正しいことを確認しましたが、結果は期待どおりに見えますが、ページに要素が表示されません。

編集：Javascriptを次のように変更しました：

$(document).bind('pageinit', function() {
var dates = {
    "date" : [
        {
            'day' : 24,
            'month' : 'Oktober',
            'year' : 2012
        },
        {
            'day' : 1,
            'month' : 'Januari',
            'year' : 2013
        }
    ]
};

var data = '';
$.each( dates, function( index, value ){

    $.each( dates[index], function( i, val) {
        data += '<input type="radio" name="radio-visnings-date" value="' + this.day + ' ' + this.month + ' ' + this.year + '"/><label for="radio-visnings-date">' + this.day + ' ' + this.month + ' ' + this.year + '</label>';

    });

});

$('#visning-dates').append( data ).trigger('create');
$('#visning-dates').controlgroup('refresh');

});

DOM の要素を取得できるようになりましたが、jqm の基本的なスタイルはありません。:/

4

4 に答える 4

3

問題は、ラジオ ボタン要素が最初から DOM にないため、JQM css が適用されないことです。数週間前にドロップダウン ボックスをページに動的に追加しようとしたときに、同様の問題が発生しました。

私がそれを解決した方法は、空の要素（あなたの場合はラジオボタンセット）を作成して非表示にし、データを追加して要素を更新してから表示することでした。「作成」メソッドは必要ありません..だから...

<input type="radio"  id="radio-visnings-date"/>

最初からhtmlにある必要があります。このようにして、JQMスタイルが適用されます..

次に、js で、ページロード時にラジオ要素を非表示にするために次を使用する必要があります。

$(document).ready(function() { 
    $('#visning-dates').hide(); 
});

その後交換

$('#visning-dates').append( data ).trigger('create');
 $('#visning-dates').controlgroup('refresh');

と

$('#visning-dates').append( data );
$('#visning-dates').controlgroup('refresh', true);
$('#visning-dates').show();
于 2012-10-01T08:03:33.533 に答える
0

すべてのラジオ ボタンにクラスを設定してから、次のことを試してください。

$('.radiosclass').checkboxradio("refresh");
于 2012-10-01T08:11:19.263 に答える
0

これを削除

$(document).bind('pageinit', function() {

そしてそれを同封します

$(function() {

デモ

于 2012-10-01T07:45:22.647 に答える
0

これで問題が解決するはずです

https://forum.jquery.com/topic/applying-styles-to-dynamically-added-radio-buttons

于 2012-10-01T08:58:42.510 に答える