Question

我正在使用jQMobile 1.0，并从API返回的json数据动态构建单选按钮列表。

我已经能够通过模板显示字段集的内容来使它们（大多数）按预期显示，并使用jqMobile从静态标签和单选按钮生成的相同标记：

<script id="shows-list" type="text/x-jquery-tmpl">
    <div class="ui-radio">
    <input type="radio" name="activeShow" id="activeShow${showID}" value="${showID}">
        <label for="activeShow2" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-radio-off">
            <span class="ui-btn-inner" aria-hidden="true">
                <span class="ui-btn-text">
                    <h2>${showname}</h2>
                    <p>${opendate} &mdash; ${closedate}</p>
                </span>
                <span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span>
            </span>
        </label>
    </div>
</script>

这是使用模板和更新页面内容的代码：

renderSettingsShowsList: function ( data ) {
    $("#showChooser")
        .empty()
        .append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>');
    $("#shows-list")
        .tmpl( data )
        .appendTo("#showChooser .ui-controlgroup-controls");
}

除了丢失圆角之外，列表看起来好像是正常生成的，但剩下的问题是什么都没有似乎在点击时发生。通常情况下，我希望看到选中的单选按钮，标签背景颜色会发生变化，以便在选择时获得更多视觉反馈。

我已尝试与标签关联的looking at the event handlers，并且标签上直接有一个点击处理程序（以及绑定到文档的2），所以我尝试保存对它的引用然后重新附上它：

renderSettingsShowsList: function ( data ) {
    //save reference to existing click handler so we can re-apply it
    var clk = $("#showChooser label:first").data("events").click[0].handler;

    $("#showChooser").empty().append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>');

    var newContent = $("#shows-list").tmpl( data ).find("label").each(function(){
        $(this).click(clk);
    });

    newContent.appendTo("#showChooser .ui-controlgroup-controls");
}

我已经尝试在新标记到位后运行$("#settings").page()（在renderSetingsShowsList的最后一行，但这似乎没有任何效果。

是否有一个受制裁的方法来做我正在尝试做的事情，让jQuery Mobile做它的增强功能，或者我将不得不以某种方式一起破解它？

Answer 1

这是我提出的那种“黑客”解决方案。它有效，但我很想知道是否有更好的方法。

renderSettingsShowsList: function ( data ) {
    $("#showChooser")
        .empty()
        .append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>');

    $("#shows-list").tmpl( data ).appendTo("#showChooser .ui-controlgroup-controls");

    //assign click handler to new form controls to do everything we need it to
    $('#showChooser input:radio').click(function(e) {

        //mark all as not selected
        $("#showChooser input:radio").prop('checked', false);
        $("#showChooser label")
            .attr('data-theme','c')
            .removeClass('ui-btn-up-e')
            .addClass('ui-radio-off')
            .removeClass('ui-radio-on')
            .find(".ui-icon")
                .addClass('ui-icon-radio-off')
                .removeClass('ui-icon-shadow')
                .removeClass('ui-icon-radio-on');

        //style selected option
        var radio = $(this),
            label = radio.next();
        radio.prop('checked', true);
        label.attr('data-theme','e')
            .addClass('ui-btn-up-e')
            .removeClass('ui-radio-off')
            .addClass('ui-radio-on')
            .find(".ui-icon")
                .removeClass('ui-icon-radio-off')
                .addClass('ui-icon-shadow')
                .addClass('ui-icon-radio-on');

    });
}

在jQuery Mobile中构建动态单选按钮列表，但没有获得任何单击事件

1 个答案: