Javascript 一页网站（jquerymobile）：如何在DOM中管理一页的多个实例？

我正在创建一个基于jquery mobile的社交网站。使用AJAX动态加载页面，并将其缓存在DOM中（jQM对此进行管理）。我在网站上有一个聊天系统：当用户单击联系人列表页面（/chat/）上的姓名时，会加载一个带有所选联系人的对话历史记录的页面（/char/msg/？u=user\u name）

问题：当用户在同一页面上与多（n）个用户聊天时，会话页面的n个实例将被加载并存储在DOM上（/chat/msg/？u=user\u 1，/chat/msg/？u=user\u 2，…/chat/msg/？u=user\n）。对话页面上元素的ID将不可避免地发生冲突，这将破坏聊天功能

如何管理对话页面以避免ID冲突？当切换到一个对话页面时，销毁所有其他对话页面不是一个选项-我想支持在对话之间快速切换。我注意到GMail和Facebook在这种情况下会随机分配唯一ID，但这是最好的做法吗？有一种模式我可以利用吗？还有更简单的解决方案吗

---

多谢各位

有一个通过$.mobile.activePage对当前页面的引用，任何选择器都应该从当前页面作为根目录进行搜索，例如$.mobile.activePage.find（“#myElement”）

您还需要确保正确使用pageinit/pageshow在侦听器上正确绑定

——在这种情况下，您也有对当前页面的引用

编辑
我想我应该加上这个，以防有帮助：
这就是我处理多个页面和id冲突的方法，我假设您也在使用domcaching=true？我从来没有用过这个，但不应该有任何新问题。
这是习惯jQuery Mobile时的常见问题。解决方案是，如果您发现自己在多个伪页面上使用相同的ID，那么请停止，并将它们改为类。对于以非唯一方式使用id的任何元素，只需将
id
属性更改为
class

以下是一个例子：

<div data-role="page" id="some-page">
    <div data-role="content">
        <ul class="page-list">
            <li class="first-list-item"></li>
        </ul>
        <a class="back-btn" data-role="button" href="#">Back</a>
    </div>
</div>






然后，您可以使用
$.mobile.activePage.find（'.back btn'）
查找当前页面的后退按钮，也可以使用
$（'#某些页面'）.find（'.back btn'）
查找特定的后退按钮

基本上，我的建议可以归结为使用页面ID作为选择器的唯一部分，然后对任何更具体的内容使用类，这样每个页面都可以具有相同的结构。这也将帮助您编写可重用的代码。
感谢您的回复。我注意到，当只有两个元素具有相同的ID（例如）时，JavaScript应用程序会中断。这与使用jQuery或其他方法选择元素的方式无关。这是一个主要的挑战。你不应该在一个页面中有两个相同id的元素，我在答案中添加了一个链接，指向我之前发布的更详细的解决方案