1

我不知道这是否是一个错误，但如果您想动态生成单选按钮列表并默认选择一个，则以下内容不起作用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");

});

HTML 变量的值是从文档 ( Radio Buttons Docs )中复制的

这是页面标记：

<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');
    }

});

尽管我希望有更好的解决方案...

4

1 回答 1

1

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

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

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

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

});

也许有人会发现这很有用

于 2013-09-12T09:12:22.963 回答