jQuery Mobile pagecontainer remove 永远不会触发答案

【问题标题】：jQuery Mobile pagecontainerremove never firesjQuery Mobile pagecontainer remove 永远不会触发
【发布时间】：2014-11-08 06:49:10
【问题描述】：

在我的多页 jqm 文档中有一个 ID 为 #internal 的页面。在某些时候我会这样做

$('#internal').remove();

页面已被删除，但

$('body').on('pagecontainerremove',function(e,ui){console.log(ui.toPage);console.log('page removed');})

不开火。谷歌搜索 pagecontainerremove 并尝试各种删除页面的方法并没有产生任何有用的结果。

【问题讨论】：

此事件仅在单页模型而非多页模型中触发。准确地说，对于未缓存的外部页面（默认情况下）。如果将data-dom-cache="true"添加到外部页面的页面div中，它将被缓存并且一旦导航离开就不会从dom中删除。
此外，它看起来像 jQM 1.4 中的一个错误 pageremove 会触发，而 pagecontainerremove 不会触发。

标签： jquery-mobile event-handling

【解决方案1】：

remove 事件 pageremove 及其“继任者”pagecontainerremove 在单页模型中的外部页面上触发。 jQuery Mobile 在导航离开时从 DOM 中移除 external 页面。默认情况下，jQuery Mobile 不会缓存外部页面并绑定bindRemove 以删除它们。但是，如果 external 页面被缓存 data-dom-cache="true"，则不会附加 remove 事件以将其从 DOM 中删除。

虽然pageremove被pagecontainerremove替换了，但是后者并没有触发，这绝对是jQuery Mobile 1.4的一个bug。

/* doesn't fire */
$(document).on("pagecontainerremove", function (e) {
    console.log("pagecontainer event: " + e.type);
});

/* does fire */
$(document).on("pageremove", function (e) {
    console.log("page event: " + e.type);
});

Demo

尽管如此，可以在多页模型中使用bindRemove 让jQuery Mobile 在隐藏后将其移除。首先，将data-external-page="true" 添加到要被jQuery Mobile 删除的页面div 中，然后将其标记为删除$("#pageID").page("bindRemove")。

<div data-role="page" id="pageID" data-external-page="true">

$(document).on("pagecreate", "#pageID", function (e) {
    $(e.target).page("bindRemove");
});

Demo

【讨论】：