Question

我正在jQueryMobile中动态生成页面，但我无法理解为什么新生成的页面没有更新到最后一个版本。

这是用例：

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

请看这个小提琴：

http://fiddle.jshell.net/cqUrD/

这是我的代码：

HTML

<div data-role="page" id="home">
    <div data-role="header" data-position="fixed">
         <h1>static page</h1>

    </div>
    <div data-role="content"> <a href="#" data-role="button" id="createfirst">Create new page</a>
        <div data-role="content"> <a href="#" data-role="button" id="createanother">Create another new page</a>

    </div>
    <div data-role="footer" data-position="fixed">
         <h1>footer</h1>

    </div>
</div>

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

我该如何解决这个问题？我需要始终显示新页面的更新版本。

提前致谢！

Answer 1

工作示例：http://jsfiddle.net/Gajotres/Xfh8p/

在创建新页面之前，必须删除之前的页面。在这种情况下， DOM 填充了新页面，但第一个仍然存在，因为它们都具有相同的名称，第一个具有优先级。

另外，绑定click事件时不要仅将其绑定到标记，这也是一个问题。每按一次返回按钮，另一页就会在 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();
});

在这种情况下， pagehide 事件已绑定到动态创建的页面。因为它被绑定到文档对象，所以当删除页面时它仍然存在。它告诉 jQuery Mobile 在转换过程中删除页面#page。

正如您所看到的，我使用了jQuery Mobile页面事件来触发页面删除。如果您想了解有关此主题的更多信息，请查看我的其他 ARTICLE （我的个人博客）或找到 HERE 。

Answer 2

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

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

链接：http://fiddle.jshell.net/cqUrD/1/

jQueryMobile - 为什么新动态生成的页面没有更新到上一个版本？

2 个答案: