Jquery 在动态创建的单选按钮中未正确应用样式_Jquery_Html_Css_Jquery Mobile

Jquery 在动态创建的单选按钮中未正确应用样式

jquery html css jquery-mobile

Jquery 在动态创建的单选按钮中未正确应用样式,jquery,html,css,jquery-mobile,Jquery,Html,Css,Jquery Mobile,我必须动态地创建一个单选按钮组。我能够成功地创建它。但问题是动态创建的单选按钮看起来不像静态按钮我尝试了两种方法： 1）在fieldset-ui角上调用create，所有类都被添加到一个内部跨距上，因此所有单选按钮都显示为四舍五入。 2）在包含fieldset的div上调用create-这里的问题更好。但仍然存在一些问题。首先，当只有单选按钮时，ui-controlgroup last类被添加到该单选按钮。接下来，当添加第二个单选按钮时，ui-controlgroup-last类被添加到该

我必须动态地创建一个单选按钮组。我能够成功地创建它。但问题是动态创建的单选按钮看起来不像静态按钮

我尝试了两种方法： 1）在

fieldset

ui角上调用create
，所有类都被添加到一个内部跨距上，因此所有单选按钮都显示为四舍五入。
2） 在包含fieldset
的div上调用create
-这里的问题更好。但仍然存在一些问题。首先，当只有单选按钮时，ui-controlgroup last
类被添加到该单选按钮。接下来，当添加第二个单选按钮时，ui-controlgroup-last
类被添加到该单选按钮中。但是ui-controlgroup-last
仍然存在于第一个单选按钮中，并且此循环重复。因此，所有单选按钮都具有last-radiobutton的样式
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
    <script>
$(document).ready(function()
{
    for (var i = 0; i < 3; i++)
    {
        $("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label for="radio1-'+i+'">Value</label>');
        $("#rgroup1").trigger("create");

        $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label for="radio2-'+i+'">Value</label>');
        $("#radiodiv1").trigger("create");

    }
});

    </script>
</head>

<body>
  <div data-role="content">
    <h3>Normal radio buttons</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup">
            <input type="radio" name="rg" id="radio-1"/><label for="radio-1">Value</label>
            <input type="radio" name="rg" id="radio-2"/><label for="radio-2">Value</label>
            <input type="radio" name="rg" id="radio-3"/><label for="radio-3">Value</label>
        </fieldset>
    </div>
    <h3>Dynamically created-Div Refresh</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup1">
        </fieldset>
    </div>
     <h3>Dynamically created-Fieldset Refresh</h3>
    <div id="radiodiv1">
        <fieldset data-role="controlgroup" id="rgroup2">
        </fieldset>
    </div>
  </div>
</body>


$（文档）.ready（函数（）
{
对于（变量i=0；i<3；i++）
{
$（“#rgroup1”）.append（'Value'）；
$（“#rgroup1”）.trigger（“创建”）；
$（“#rgroup2”）.append（'Value'）；
$（“#radiodiv1”）。触发器（“创建”）；
}
});
普通单选按钮
价值
价值
价值
动态创建的Div刷新
动态创建的字段集刷新


另外，我之所以在每次追加后调用create，是因为在我的实际用例中，它就是这样工作的，任何时候都只创建一个单选按钮
生成的源
<html lang="en" class="ui-mobile"><head><base href="http://localhost:8081/html5/calendar-new/radio_issue.html">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css">
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
    <script>
$(document).ready(function()
{
    for (var i = 0; i < 3; i++)
    {
        $("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label for="radio1-'+i+'">Value</label>');
        $("#rgroup1").trigger("create");

        $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label for="radio2-'+i+'">Value</label>');
        $("#radiodiv1").trigger("create");

    }
});

    </script>
<title></title></head>

<body class="ui-mobile-viewport"><div data-role="page" data-url="/html5/calendar-new/radio_issue.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 933px; ">
  <div data-role="content" class="ui-content" role="main">
    <h3>Normal radio buttons</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
            <div class="ui-radio"><input type="radio" name="rg" id="radio-1"><label for="radio-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-btn-up-c"><span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
            <div class="ui-radio"><input type="radio" name="rg" id="radio-2"><label for="radio-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
            <div class="ui-radio"><input type="radio" name="rg" id="radio-3"><label for="radio-3" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
        </fieldset>
    </div>
    <h3>Dynamically created-Div Refresh</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup1" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
        <div class="ui-radio"><input type="radio" name="rg1" id="radio1-0"><label for="radio1-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg1" id="radio1-1"><label for="radio1-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg1" id="radio1-2"><label for="radio1-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div></fieldset>
    </div>
     <h3>Dynamically created-Fieldset Refresh</h3>
    <div id="radiodiv1">
        <fieldset data-role="controlgroup" id="rgroup2" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
        <div class="ui-radio"><input type="radio" name="rg2" id="radio2-0"><label for="radio2-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg2" id="radio2-1"><label for="radio2-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg2" id="radio2-2"><label for="radio2-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div></fieldset>
    </div>
  </div>

</div><div class="ui-loader ui-body-a ui-corner-all" style="top: 290px; "><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div></body></html>


$（文档）.ready（函数（）
{
对于（变量i=0；i<3；i++）
{
$（“#rgroup1”）.append（'Value'）；
$（“#rgroup1”）.trigger（“创建”）；
$（“#rgroup2”）.append（'Value'）；
$（“#radiodiv1”）。触发器（“创建”）；
}
});
普通单选按钮
价值
价值
价值
动态创建的Div刷新
价值
动态创建的字段集刷新
价值
加载
既然您使用的是jquery，我建议您使用
$（“#radio1-”+i）.addClass（“类名”）
你需要刷新按钮
刷新单选按钮
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
    <script>
$(document).ready(function()
{
    for (var i = 0; i < 3; i++)
    {
        /*$("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label id="label1-'+i+'" for="radio1-'+i+'">Value</label>');
        $("#rgroup1").trigger("create");*/


        $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label id="label2-'+i+'"for="radio2-'+i+'">Value</label>');
        $("#radiodiv1").trigger("create");


    }
    for (var i = 0; i < 2; i++)
    {
        $('#label2-'+i).removeClass("ui-controlgroup-last ui-corner-bottom");
    }
});

    </script>
</head>

<body>
  <div data-role="content">
    <h3>Normal radio buttons</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup">
            <input type="radio" name="rg" id="radio-1"/><label for="radio-1">Value</label>
            <input type="radio" name="rg" id="radio-2"/><label for="radio-2">Value</label>
            <input type="radio" name="rg" id="radio-3"/><label for="radio-3">Value</label>
        </fieldset>
    </div>
    <!-- <h3>Dynamically created-Div Refresh</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup1">
        </fieldset>
    </div> -->
     <h3>Dynamically created-Fieldset Refresh</h3>
    <div id="radiodiv1">
        <fieldset data-role="controlgroup" id="rgroup2">
        </fieldset>
    </div>
  </div>
</body>

如果通过JavaScript操纵单选按钮，则必须调用其上的刷新方法来更新视觉样式。以下是一个例子：
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

我通过从所有标签（最后一个单选按钮的标签除外）中明确删除ui-controlgroup-last
和ui-corner-bottom
类，解决了这个问题
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
    <script>
$(document).ready(function()
{
    for (var i = 0; i < 3; i++)
    {
        /*$("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label id="label1-'+i+'" for="radio1-'+i+'">Value</label>');
        $("#rgroup1").trigger("create");*/


        $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label id="label2-'+i+'"for="radio2-'+i+'">Value</label>');
        $("#radiodiv1").trigger("create");


    }
    for (var i = 0; i < 2; i++)
    {
        $('#label2-'+i).removeClass("ui-controlgroup-last ui-corner-bottom");
    }
});

    </script>
</head>

<body>
  <div data-role="content">
    <h3>Normal radio buttons</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup">
            <input type="radio" name="rg" id="radio-1"/><label for="radio-1">Value</label>
            <input type="radio" name="rg" id="radio-2"/><label for="radio-2">Value</label>
            <input type="radio" name="rg" id="radio-3"/><label for="radio-3">Value</label>
        </fieldset>
    </div>
    <!-- <h3>Dynamically created-Div Refresh</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup1">
        </fieldset>
    </div> -->
     <h3>Dynamically created-Fieldset Refresh</h3>
    <div id="radiodiv1">
        <fieldset data-role="controlgroup" id="rgroup2">
        </fieldset>
    </div>
  </div>
</body>


$（文档）.ready（函数（）
{
对于（变量i=0；i<3；i++）
{
/*$（“#rgroup1”）.append（'Value'）；
$（“#rgroup1”）.trigger（“创建”）*/
$（“#rgroup2”）.append（'Value'）；
$（“#radiodiv1”）。触发器（“创建”）；
}
对于（变量i=0；i<2；i++）
{
$（'#label2-'+i）.removeClass（“ui控制组最后一个ui角底部”）；
}
});
普通单选按钮
价值
价值
价值
动态创建的字段集刷新

如果有人遇到这个问题，使用当前版本（1.4.5）应用样式的正确方法是
在我编写的一段代码中，在创建了一点动态html之后，我附加了它，然后应用样式：
var currentAddressInput = new AddressInterface();
jQuery("#contentDiv").append(currentAddressInput.domElement).enhanceWithin();

你能从Browser上传你在View source上看到的呈现HTML吗？然后我必须编写代码删除不需要的类并添加需要的类。我想jquery mobile应该自己处理它。我相信有一种方法，当我遇到更新背景的类似问题时，我花了很多时间，然后决定几行代码不值得等待。我更担心的是样式的延迟生效，但高兴的是根本没有延迟。希望你能找到你想要的答案。这是为了在你通过js以编程方式选择任何单选按钮时更新视觉样式。在这里，我不是通过js进行任何选择。而是尝试动态创建单选按钮。感谢你花时间回答我的问题。还要确保没有任何其他css声明重写新应用的类。