Jquery mobile Jquery Mobile Javascript无法在ajax加载上工作

在“我的html”页面中具有以下标记，以便根据单击搜索图标的情况切换搜索栏：

<a id="searchIcon" href="/"></a> 

<div id="searchWrapOuter" style="display:none;">
    <div id="searchWrapInner">
        <div id="formContainer">
            <form id="searchForm" action="#">
                <div>
                    <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
                </div>
            </form>
        </div>
    </div>
</div>

此代码在直接从Url加载的页面上按预期工作。当从Ajax加载的链接进入页面时，会将页面内容加载到DOM中，并且DOM就绪处理程序只对第一个页面执行

我读过关于使用

$（document）.on（'pageinit'），而不是$（document）.ready（）/$（function（））

但是，当从ajax链接进入时，我仍然无法让它工作。如何正确地实现这些事件以使代码从ajax链接进入工作

---

谢谢，

这很可能是因为您使用的是ID而不是类。jQuery Mobile不能很好地使用IDs，因为它会将页面缓存到DOM中。因此，如果您打开一个页面，关闭它，然后返回该页面，您的页面可能会在DOM中出现两次（一次可见，一次隐藏/缓存）。因此当您执行

$（“#searchWrapOuter”）

您不知道实际处理的是哪个元素（在您的情况下，可能是隐藏的元素）

解决方案是将ID更改为类。这不是很直观，但我发现这是使用jQuery Mobile的最佳方法

还要注意文档中可能与您相关的注释：

所有元素的id属性不仅在给定页面上必须是唯一的，而且在站点的所有页面上也必须是唯一的。这是因为jQuery Mobile的单页导航模型允许在DOM中同时存在许多不同的“页面”。这在使用多页模板时也适用，因为所有“页面”在模板上，将立即加载

---

您可以手动将延迟时间调整为500毫秒和1秒

$(searchWrapper).delay(1000).slideToggle(); 

---

我的问题是页面id在pages标签下面。因此，一旦我将page div移到它上面，javascript就包含在ajax页面加载中。在此之前，这是一个专业提示。当表单在几个不同的模型上呈现时（在不同的页面上，但每个页面仍然被缓存），我遇到了一个错误该表单绑定到一个div ID，并通过AJAX提交。该表单将在我刷新浏览器后提交，但在通过AJAX导航在页面之间导航时不会提交。我将该表单改为使用a，一切正常。

$(searchWrapper).delay(1000).slideToggle();