加载ajax页面时Jquery移动DOM id冲突

Question

我的 HTML 中有一些元素，例如自定义加载图像，例如我附加到标题部分

<div data-role="page" id="home">


<div data-role="header" data-position="inline">
<div class='spinner'><img id="loading" src="css/images/loading.gif"/></div>
    <h1>title</h1>

</div>

</div>

为了让它显示，我只需调用图像 ID，例如 $('#loading).show();

问题是我在其他页面上有这个布局，当我通过 AJAX 加载新页面时，它将新的 DOM 附加到文档的末尾，因此选择的图像来 self 所在的第一页不是第二个。

 <div data-role="page" id="page2">


<div data-role="header" data-position="inline">
 //this image will not show 
<div class='spinner'><img id="loading" src="css/images/loading.gif"/></div>
    <h1>title for page 2</h1>

</div>

</div>

现在我知道有一些解决方法，比如我可以给它一个类名并以这种方式调用它，但这更多的是关于 jquery 如何处理 DOM 注入(inject)的基本问题。您可能认为根据事件页面查找元素足够直观，或者我可能遗漏了一些东西。

Answer 1

答案也是很重要的...当您使用 jQuery Mobile 时，您的 ID 在整个网站中应该是唯一的，这样您就不会遇到“冲突”。

但是，您可以使用 $.mobile.activePage 对象仅查找当前页面上的元素:

$.mobile.activePage.find('#loading').show();

这是一个演示:http://jsfiddle.net/QWzDB/ (请注意，警报使用未显示页面中的文本)