Question

我在单个html中有两个页面：

<body> 
<div data-role="page" id="select">
    <h2>Please choose a date and group:</h2>

    <input type="text" class="datepicker" />
    <input type="button" value="Register" onclick="LoadRegister()"/>
</div> <!-- End of select page -->


<div data-role="page" id="mainregister" data-external-page="true">      
    <div data-role="content" id="subregister">

        <table data-role="table" class="ui-responsive" id="tblregister">
            <thead>
                <tr>
                    <th>Name</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id= "tblregisterbody">
            </tbody>
        </table>
    </div>
    <input type="button" value="Save" onclick="SaveRegister()"/>

</div>

用户从select页面中选择日期，点击按钮时会调用以下内容：

    function LoadRegister(){

    var today = new Date(picker.get());

    $.mobile.pageContainer.pagecontainer("change", '#mainregister', {
        transition: 'flip'
    });

    GetRegister(today, 2);
}

GetRegister()函数加载数据并动态创建一些元素（主要是字段集中的单选按钮）。

这一切都很棒。但是，如果用户返回select页面选择不同的日期，则再次点击按钮页面不正确 - 我可以看到在第一次加载时创建的旧字段集仍然存在。 / p>

如何删除这些动态创建的项目（根据HTML有效重新加载mainregister页面并重新开始）？

Answer 1

我不确定这是否是正确的做法，但对我有用：

$('#tblregisterbody').empty();

在进行页面更改之前，我只需清除包含LoadRegister函数中动态生成元素的元素。

function LoadRegister(){

var today = new Date(picker.get());
$('#tblregisterbody').empty(); // This clears the table with the dynamic elements
$.mobile.pageContainer.pagecontainer("change", '#mainregister', {
    transition: 'flip'
});

GetRegister(today, 2);

}

jquery mobile - 动态创建的项目不会在页面背面删除＆amp;所述

1 个答案: