0

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

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

提前致谢！

4

2 回答 2

2

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

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

此外，当绑定单击事件时，不要仅将其绑定到标签，这也是一个问题。每次按下返回按钮时，都会在 中创建另一个页面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 页面事件来触发页面删除。如果您想了解有关此主题的更多信息，请查看我的其他文章（我的个人博客）或在此处找到。

于 2013-06-21T06:53:17.143 回答
1

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

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

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

于 2013-06-21T06:34:01.893 回答