0

我有一个包含三个页面 ( <div data-role = 'page'>) 的 jquery 移动网站。

在第 1 页的标题上，我有一个用于选择语言组件的选择菜单：

<div data-role = 'header'> ... <label></><select><options></></> ... </>.

我不希望整个站点中出现多个语言选择器组件实例。

因此，根据SO的建议，我在每个页面的 pageshow 事件中将标题节点从一个页面移动到另一个页面。

当我转到第 2 页时，选择菜单不起作用；但是当我导航回第 1 页时，它又可以工作了。

4

1 回答 1

1

使用“pagebeforeshow”而不是“pagecreate”事件，因为 pagecreate 在创建该页面时只会被调用一次。

所以，如果你想每次改变页面都得到一个事件，你应该使用'pagebeforeshow'、'pagebeforehide.'pageshow'或'pagehide'。

我推荐pagebeforeshow在页面显示之前更改 UI。:)

您是否使用 .remove() API 将“选择”从上一页移动到新页面？.remove() 从父元素及其数据和事件中删除一个元素。因此，您应该在删除后重新定义事件处理程序。

此外， .detach() 仅用于从其父元素中分离元素。但它有一些关于jquery mobile 增强的问题。

我在上面发布了一个 jsfiddle。jsfiddle.net/cwdoh/ZaVch

由 SHANNON 编辑...以防将来删除小提琴，这是您的代码：

    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>Page 1</h1>
            <select id="language-select">
                <option>Korean</option>
                <option>English</option>
                <option>JavaScript :)</option>
            </select>
        </div>

        <div data-role="content">
            <a data-role="button" href="#page2">go to Page2</a>
        </div>
    </div>

    <div data-role="page" id="page2">
        <div data-role="header">
            <h1>Page 2</h1>
        </div>

        <div data-role="content">
            <a data-role="button" href="#page1">go to Page1</a>
        </div>
    </div>

$(document).on( "pagebeforeshow", function( e, data ) {
    // move language-select from previous page
    var selectMenu = data.prevPage.find( "#language-select" );

    selectMenu
        .remove()     // remove from previous page
        .appendTo( $(e.target)   // append to active page
            .find( "[data-role='header']" ) );

    // bind event handler after append
    $("#language-select").bind( "change", function() {
        alert( "language-select changed" );
    });

    // re-build 
    selectMenu.selectmenu();
});
于 2013-02-18T00:25:37.620 回答