Question

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

DEMO：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基本样式。：/

Answer 1

问题是单选按钮元素不在DOM中，所以JQM css没有应用到它，我在几周前尝试动态地向我的页面添加一个下拉框时遇到了类似的问题

我解决它的方法是创建一个空元素（在你的情况下是一个单选按钮集）并隐藏它，然后简单地附加数据，刷新元素然后显示它。不需要'create'方法..所以...

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

应该从一开始就在你的html中，这样就应用了JQM样式..

然后在你的js中，应该使用以下内容来隐藏pageload上的无线电元素：

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

Answer 2

删除此

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

并将其括在

中

$(function() {

DEMO

Answer 3

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

$('.radiosclass').checkboxradio("refresh");

Answer 4

这应该可以解决您的问题

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

JQM - 触发（'创建'）不应用样式

4 个答案: