Question

我开发了一个UI，它通过克隆HTML中的模板元素来动态添加可折叠div。 div包含一个单选按钮。问题是在克隆并添加除法后，单选按钮不起作用（所选元素不能更改）。

相关部分的HTML如下：

<div data-role="main" class="ui-content" id="appointments-list">
    <div data-role="collapsible" class="appointment" id="appointment" unique-id="">
        <h1 id="appointment-heading"></h1>

        <fieldset data-role="controlgroup" data-type="horizontal" id="radio-group">
            <legend>Choose a pet:</legend>
            <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
            <label for="radio-choice-1">Cat</label>

            <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />
            <label for="radio-choice-2">Dog</label>

            <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  />
            <label for="radio-choice-3">Hamster</label>

            <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4"  />
            <label for="radio-choice-4">Lizard</label>
        </fieldset>

        <div data-role="fieldcontain">
            <div>
                <textarea id="notes"></textarea>
            </div>

            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <button class="ui-button" id="appointment-save-button">Save</button>
                </div>

                <div class="ui-block-b">
                    <button class="ui-button" id="appointment-finalise-button">Finalise</button>
                </div>
            </div>
        </div>
    </div>
</div>

克隆可折叠的代码如下：

function updateAppointment(elem_appointment, data_appointment, str_date)
{
var elem_appointment_new = $('#appointment').clone();

    addAppointment(elem_appointment_new, data_appointment, elem_appointment.attr('id'), str_date);
    elem_appointment_new.collapsible('expand');

    var radio_group = elem_appointment_new.find('#radio-group');

    radio_group.checkboxradio();
    radio_group.checkboxradio('refresh');

    elem_appointment.after(elem_appointment_new);
    elem_appointment.remove();
}

注意克隆的collapsible具有调用的所有函数，以便在函数＆＃34; addAppointment＆＃34;中调用它。它的精简版本如下：

function addAppointment(elem_appointment, data_appointment, id_appointment, str_date)
{
    elem_appointment.show();
    elem_appointment.attr('id', id_appointment);
    elem_appointment.attr('unique-id', data_appointment['ID']);

    elem_appointment.find('.ui-collapsible-heading-toggle').children().unwrap();
    elem_appointment.find('.ui-collapsible-heading-status').remove();
    elem_appointment.find('.ui-collapsible-content').children().unwrap();
    elem_appointment.collapsible();
}

当我尝试按其中一个单选按钮时，我在Chrome的Javascript控制台中收到以下错误：

Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'

有人能告诉我如何让单选按钮工作吗？

JQuery Mobile - 动态添加包含单选按钮的可折叠Div

0 个答案: