Question

我不知道这是不是一个错误，但如果你想动态生成单选按钮列表并默认选中一个，则以下内容不适用于changePage()：

$(document).on("pagebeforeshow", "#radio", function(e) {

HTML = '<fieldset data-role="controlgroup"><legend>Choose a pet:</legend><input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /><label for="radio-choice-1">Cat</label><input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /><label for="radio-choice-2">Dog</label><input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /><label for="radio-choice-3">Hamster</label><input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" /><label for="radio-choice-4">Lizard</label></fieldset>';

$('span.label').append(HTML);
$('div#input-radio').trigger("create");

});

从文档（Radio Buttons Docs）

复制HTML变量的值

这是页面标记：

<div id="radio" data-role="page" data-theme="a">

        <div data-role="header" data-position="fixed" data-id="footer">
            <a href="../index.html" data-icon="arrow-l" data-iconpos="notext" data-ajax="false"></a>
            <h1 class="app-name"></h1>
            <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
                <a href="#" data-role="button" data-icon="bars" data-iconpos="notext"></a>
            </div>

            <div data-role="navbar" data-iconpos="top">
                <ul class="input-nav">
                    <li><a class="prev" href="#" data-icon="arrow-l" >Previous</a></li>
                    <li><a class="next" href="#" data-icon="arrow-r" >Next</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /header -->

        <div id="input-radio" data-role="content" data-theme="a">
            <span class="label"></span>
            <!-- List of radio buttons options generated dynamically -->
            <!-- Option 1 -->
            <!-- Option 2 -->
            <!-- Option 3 -->


        </div><!-- /content -->
        <div data-role="footer"  data-position="fixed" data-id="footer">
            <h1>Footer</h1>
        </div>
    </div><!-- /text -->

我有一个多页模板，我用

从一个页面转到另一个页面

//Go to next page
        $.mobile.changePage(next_page, {
            transition : "slide",
            reverse : false,
            changeHash : false,
            allowSamePageTransition : true
        });

一切正常，单选按钮正确呈现，但从未选中“已选中”选项...

我错过了什么吗？任何解决方法？

编辑：我使用它的唯一方法是在pagebeforeshow上添加此代码：

$('div#input-radio input:radio').each(function(i) {

    if($(this).attr('checked')){


        $(this).next().trigger('vclick');
    }

});

即使我希望有更好的解决方案......

Answer 1

正如我在编辑中所说，我得到它的唯一方法是在pagebeforeshow上添加此代码：

$('div#input-radio input:radio').each(function(i) {

    if($(this).attr('checked')){

        $(this).next().trigger('vclick');
    }

});

也许有人会发现这个有用的

动态添加标记时，单选按钮“已检查”属性不起作用jQuery Mobile 1.3.2

1 个答案: