Javascript 什么'；多次链接到同一页面的正确方法是什么？

我试图用一个页面来显示相同类型的数据（比如水果）。然后我想在我的网站层次结构的任何地方加载这个页面，但每次都使用不同的参数

我的主页如下所示，带有指向同一页面的两个链接

show.html

：

单击这两个按钮中的每一个将在DOM中创建页面

show.html

的新实例。因此，show.html中的所有项在DOM中都有重复的ID

在我的javascript中，我希望动态填充show.html页面：

$（'div[id=“show”]）.live（“pagebeforeshow”，函数（e，数据）{
var p=getUrlParameter（“p”）；
show（p）；
});
变量显示=功能（p）{
$.ajax({
网址：'http://show.com/?p=“+p，
成功：功能（数据）{
//用新数据刷新“显示”页面
//第一次：很好。
//第二次：“show”页面在DOM中重复，所以它很混乱。
} 
});
}

现在，第一次

show.html

加载时一切正常。但是，第二次加载

show.html

中的所有内容两次，DOM包含许多重复的ID

有没有办法在加载新页面之前从DOM中删除第一个页面

或：

有没有更好的方法可以实现我在这里想要实现的目标

更新：

---

加载新页面时，我已尝试删除以前的

show

页面实例。就显示第二页而言，它是有效的。但是，在手动删除第一页后，如果需要第二次显示第一页，则会出现问题

我认为原因是jquerymobile似乎认为第一个页面已经加载，尽管我们手动删除了它。因此，当再次访问时，它不会完全重新加载第一页。我说的是这个导航序列：主页->苹果->回到主页->橙子->回到主页->苹果（这里你会看到一个有缺陷的页面）

1）您可以将ID更改为类

2） 您可以使用封装show.html的包装器，当您第二次尝试加载它时，找到之前加载的包装器并将其删除

您的show.html：

<div class='previous-load'>
  ... enclosed show.html HTML ...
</div>

---

您可以通过

$.mobile.changePage（）

加载

show.php

页面，该页面具有

reloadPage

选项：

//bind to all links that have an HREF attribute that starts with "show.html"
$('a[href^="show.html"]').bind('click', function () {

    //set a default query-string for the page-load
    var query = '';

    //if this link's HREF attribute has a query-string, use it
    if (this.href.indexOf('?') > -1) {
        query = this.href.split('?')[1];
    }

    //forward the user to the page, telling jQuery Mobile to reload the page
    //which will use the new query-string sent
    $.mobile.changePage('show.html', { reloadPage : true, data : query });

    //prevent the default behavior of the click
    return false;
});

重新加载页面（布尔值，默认值：false）

强制重新加载页面，即使该页面已在 页面容器。仅当changePage（）的“to”参数为 网址。以下是

$.mobile.changePage（）

的文档：

资料来源：

当jQuery Mobile两次加载同一页面时，这是因为HREF属性中的URL与伪页面元素上的

数据URL

属性不匹配。要调试此问题，请确保在将

数据url

属性插入DOM时检查该属性添加到

show.html

页面中。如果它似乎不匹配，则可以在元素上设置

数据url

属性，如下所示：

<div data-url="/show.html" data-role="page" id="show-page">
    ...
</div>

...

---

然后您将始终使用URL链接到该页面：

/show.html

我已经尝试删除以前的页面。它工作正常，因为它将正确显示第二页。但是当第一页需要重新排序时，问题就出现了。出于某种原因，jquerymobile认为第一个页面必须已经加载，因此它不会完全重新加载第一个页面。（我说的是这个导航序列：主页->苹果->回到主页->橙子->回到主页->苹果（这里你会看到一个有缺陷的页面）。这种方法似乎也不起作用。主页->橙子->回到主页->橙子将显示一个有缺陷的页面。

<div data-url="/show.html" data-role="page" id="show-page">
    ...
</div>