jQuery Mobile：从另一个页面中删除元素答案

【问题标题】：jQuery Mobile: remove elements from another pagejQuery Mobile：从另一个页面中删除元素
【发布时间】：2014-07-11 14:58:15
【问题描述】：

对于多页单 html 类型的应用程序，是否可以从当前活动页面中删除前一页中的元素，以便当用户单击后退按钮时，它会显示更新的页面？我已经尝试过类似下面的方法，但它似乎不起作用。

谢谢

例如）

<script>
   function somecallback_in_page1() {
      $("#page2").find("#foo").remove();
   }
</script>
<!-- current page -->
<div data-role="page" id="page1">
</div>
<div data-role="page" id="page2">
   <div id="foo">bar</div>
</div>

【问题讨论】：

标签： jquery jquery-mobile web-applications single-page-application

【解决方案1】：

由于两个页面都在 DOM 中，所以没问题：

这是一个DEMO

鉴于这两个页面：

<div data-role="page" id="page1">
     <div data-role="header">
        <h1>My page 1</h1> 
    </div>  
    <div role="main" class="ui-content">
        <a href="#page2" class="ui-btn">Go to page 2</a>
        <div id="removeMe">
            this will be removed via a button click while you are on page 2            
        </div>
    </div> 
</div>  

<div data-role="page" id="page2">
     <div data-role="header">
        <h1>My page 2</h1> 
    </div>  
    <div role="main" class="ui-content">
        <button id="btnRemove">Remove Element from Page 1</button>
        <a href="#page1" class="ui-btn">Go back to page 1</a>
    </div> 
</div>

导航到第 2 页，单击删除元素按钮，然后导航回第 1 页。

脚本是

$(document).on("pagecreate", "#page2", function(){
    $("#btnRemove").on("click", function(){
        $("#removeMe").remove();
    });
});

顺便说一句，确保您的 DOM 元素 ID 在所有页面中都是唯一的，这是一种很好的做法；否则，您以后可能会遇到令人困惑的选择器问题。

【讨论】：

谢谢！我想我的选择器中出现了一个错误。
@ljustin，不客气。在执行脚本之前，您还需要等到 DOM 准备好...

【解决方案2】：

我从未使用过 jquery 来检测是否点击了后退按钮，但这里有一些很好的链接。看看这篇文章：

JavaScript or jQuery browser back button click detector

一旦检测到，您可以使用 jquery 像这样隐藏面板：

<script>
$(function () {
   $("#foo").hide();
});
</script>

【讨论】：