jQuery mobile：当我将选择菜单附加到不同页面上的另一个 DOM 节点时，为啥会中断？

Posted 2023-05-09

【中文标题】jQuery mobile：当我将选择菜单附加到不同页面上的另一个 DOM 节点时，为啥会中断？

【英文标题】：jQuery mobile: Why does Select Menu break when I append it to another DOM node on a different page?jQuery mobile：当我将选择菜单附加到不同页面上的另一个 DOM 节点时，为什么会中断？

【发布时间】：2013-02-02 08:01:02

【问题描述】：

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

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

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

我不想要整个网站的语言选择器组件的多个实例。

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

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

【问题讨论】：

“功能失调”是什么意思？

它似乎正在接收鼠标点击（在地址栏中，'&ui-state=dialog' 被附加到 URL 并在鼠标悬停时突出显示等），但它没有打开菜单。

【参考方案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();
);

【讨论】：

cwdoh，感谢您的回复……是的，我目前正在使用“pageshow”。当我浏览页面时它成功触发。但是当我在第 1 页以外的页面上时，选择菜单不起作用（这是在网站加载时选择菜单所在的位置）。

哦，我明白了。因此，您在每个页面中都使用单一定义中的“语言选择菜单”，但选择菜单的处理程序功能仅适用于第 1 页。对吗？

我想提一下，我必须添加 jQuery( e.target ).find('[class=\"ui-select\"]').remove(); 在您的选择菜单移动步骤之后。我得到了重复的选择菜单（你的小提琴没有这个问题）。所以对我来说，操作顺序是：1 - 将 结构移动到新的 DOM 位置，2 - 从之前的任何访问中删除任何现有的 jqm 包装器内容本页，3 -设置事件监听，4 -调用selectmenu()方法。

如果你想从你的文档中移除增强的 DOM，调用 'destroy' 来处理像 .selectmenu( "destroy" ); 这样的元素。不要删除它。

这没有提到“销毁”选项：jquerymobile.com/demos/1.2.0/docs/forms/selects/methods.html ... 似乎是用于 UI 小部件