0

我是 JQM 的新手。我在通过 json 对象循环时添加单选按钮时遇到了一些问题。问题是当 trigger('create') 在控制组上运行时，控制组保持为空。

演示： 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 中，应使用以下内容来隐藏页面加载时的 radio 元素：

$(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

这应该可以解决您的问题

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

于 2012-10-01T08:58:42.510 回答
0

删除这个

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

并将其包含在

$(function() {

演示

于 2012-10-01T07:45:22.647 回答
0

尝试在所有单选按钮上设置一个类，然后尝试以下操作：

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