Javascript 为什么动态生成的新页面没有更新到最新版本？

我正在jQueryMobile中动态生成页面，但我不明白为什么新生成的页面没有更新到最新版本

这是一个用例：

页面A包含“A”元素的列表。当我单击其中一个时，应用程序将重定向到动态生成的新页面。然后我返回到页面A。我单击另一个“A”元素，但从现在起，应用程序将始终重定向到动态生成的第一个页面

请看这把小提琴：

这是我的代码：

HTML

静态页面
页脚

jQueryMobile：

$(document).on('click','a',function() {
  nameId = $(this).attr('id');
    page = '<div data-role="page" id="page" data-theme="e"><div data-  role="header"><a data-role="button" href="#" data-rel="back" data-icon="back" data-iconpos="notext">back</a><h1>Dynamic page</h1></div><div data-role="content"> Last id was: '+nameId+'</div><div data-role="footer" data-position="fixed"><h1>footer</h1></div></div>';
    //alert(nameId); this prints the right value
  $.mobile.activePage.after(page);
    $.mobile.changePage('#page', {
        transition: 'flip'
    });
});

$（文档）。在（'click'，'a'，function（）上{
nameId=$（this.attr（'id'）；
page='动态页面上一个id为：'+nameId+'footer'；
//警报（nameId）；这将打印正确的值
$.mobile.activePage.after（第页）；
$.mobile.changePage（“#page”{
过渡：“翻转”
});
});

我怎样才能解决这个问题？我需要始终显示新页面的更新版本

---

提前谢谢

第二次单击按钮时，具有相同ID的页面已经在DOM中，因此我认为jQuery无法创建具有相同ID的第二个页面（可能是缓存）。我稍微修改了一下代码。如果已存在

#页面

，则需要将其删除

if ($('body').find('#page').length != 0) $("#page").remove();

---

链接：

当您第二次单击按钮时，具有相同ID的页面已经在DOM中，因此我认为jQuery无法创建具有相同ID的第二个页面（可能是缓存）。我稍微修改了一下代码。如果已存在

#页面

，则需要将其删除

if ($('body').find('#page').length != 0) $("#page").remove();

链接：

工作示例：

在创建新页面之前，必须删除上一个页面。在本例中，

DOM

被新页面填满，但第一个页面仍然存在，因为它们都有相同的名称，所以第一个页面具有优先级

另外，在绑定单击事件时，不要仅将其绑定到标记，这也是一个问题。每次按下return按钮时，都会在DOM中创建另一个页面

总而言之，这将起作用：

$(document).on('pageinit', '#home', function(){ 
    $(document).on('click','#createfirst, #createanother',function() {
        nameId = $(this).attr('id');
        alert(nameId);
        page = '<div data-role="page" id="page" data-theme="e"><div data-  role="header"><a data-role="button" href="#" data-rel="back" data-icon="back" data-iconpos="notext">back</a><h1>Dynamic page</h1></div><div data-role="content">'+nameId+'</div><div data-role="footer" data-position="fixed"><h1>footer</h1></div></div>';
        $.mobile.activePage.after(page);
        $.mobile.changePage('#page', {
            transition: 'flip'
        });
    });
});

$(document).on('pagehide', '#page', function(){ 
    $(this).remove();
});

$（document）.on（'pageinit'，'#home'，function（）{
$（文档）。在（'单击'，'创建第一个，'创建另一个'，函数（）上）{
nameId=$（this.attr（'id'）；
警报（nameId）；
页面='动态页面'+名称ID+'页脚'；
$.mobile.activePage.after（第页）；
$.mobile.changePage（“#page”{
过渡：“翻转”
});
});
});
$（document）.on（'pagehide'，'#page'，function（）{
$（this.remove（）；
});

在这种情况下，

pagehide

事件已绑定到动态创建的页面。因为它被绑定到文档对象，所以当页面被删除时，它仍然会在那里。它告诉jQuery Mobile在从它转换的过程中删除页面

如您所见，我使用jQuery移动页面事件触发页面删除。如果您想了解有关此主题的更多信息，请查看我的另一个（我的个人博客）或查找工作示例：

在创建新页面之前，必须删除上一个页面。在本例中，

DOM

被新页面填满，但第一个页面仍然存在，因为它们都有相同的名称，所以第一个页面具有优先级

另外，在绑定单击事件时，不要仅将其绑定到标记，这也是一个问题。每次按下return按钮时，都会在DOM中创建另一个页面

总而言之，这将起作用：

$(document).on('pageinit', '#home', function(){ 
    $(document).on('click','#createfirst, #createanother',function() {
        nameId = $(this).attr('id');
        alert(nameId);
        page = '<div data-role="page" id="page" data-theme="e"><div data-  role="header"><a data-role="button" href="#" data-rel="back" data-icon="back" data-iconpos="notext">back</a><h1>Dynamic page</h1></div><div data-role="content">'+nameId+'</div><div data-role="footer" data-position="fixed"><h1>footer</h1></div></div>';
        $.mobile.activePage.after(page);
        $.mobile.changePage('#page', {
            transition: 'flip'
        });
    });
});

$(document).on('pagehide', '#page', function(){ 
    $(this).remove();
});

$（document）.on（'pageinit'，'#home'，function（）{
$（文档）。在（'单击'，'创建第一个，'创建另一个'，函数（）上）{
nameId=$（this.attr（'id'）；
警报（nameId）；
页面='动态页面'+名称ID+'页脚'；
$.mobile.activePage.after（第页）；
$.mobile.changePage（“#page”{
过渡：“翻转”
});
});
});
$（document）.on（'pagehide'，'#page'，function（）{
$（this.remove（）；
});

在这种情况下，

pagehide

事件已绑定到动态创建的页面。因为它被绑定到文档对象，所以当页面被删除时，它仍然会在那里。它告诉jQuery Mobile在从它转换的过程中删除页面

---

如您所见，我使用jQuery移动页面事件触发页面删除。如果你想找到关于这个主题的更多信息，请查看我的另一个（我的个人博客）或找到它

，我猜是缓存了它，因为它是相同的href，具有相同的id，所以不会重新创建它。通过使用时间戳使url始终唯一，我解决了此类问题。将time（）附加到url上。你可以在谷歌上找到例子。谢谢，杰克。根据你的建议，我以这种方式编辑了代码，它成功了：我猜是缓存了它，因为它是同一个href，具有相同的id，所以它不会被重新创建。通过使用时间戳使url始终唯一，我解决了此类问题。将time（）附加到url上。你可以在谷歌上找到例子。谢谢，杰克。根据您的建议，我以这种方式编辑了代码，它成功了：