jQuery Mobile Javascript无法在Ajax负载上运行

Question

在我的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>

宽度以下javascipt / jquery：

 $(function() {
        $(document).on("click", "#searchIcon", function () {
            var searchWrapper = $("#searchWrapOuter");
            $(searchWrapper).slideToggle();
            return false;
        });
});

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

我已经阅读过有关使用]的信息>

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

但是，从ajax链接进入时，我仍然无法使它正常工作。实现这些事件以使代码从Ajax链接进入工作的正确方法是什么？

谢谢，

我的html页面中具有以下标记，可根据是否单击搜索图标来切换搜索栏：

]

最有可能是因为您使用ID而不是类。 jQuery Mobile不适用于ID，因为它会将页面缓存到DOM中，因此，如果您打开一个页面，将其关闭，然后返回该页面，则您的页面可能在DOM内有两次（一个可见，一个隐藏/缓存） ）。因此，当您执行$("#searchWrapOuter")时，您不知道实际上要处理哪个元素（在您的情况下，可能是隐藏的元素）。

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

也请注意文档中的此注释，该注释也可能与您有关：

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

http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html

您可以手动将延迟时间调整为500ms和1s。

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

我的问题是页面ID在页面标签下方。因此，一旦我将页面div移动到其上方，则javascript已包含在ajax页面加载中。上一个

Answer 1

最有可能是因为您使用ID而不是类。 jQuery Mobile不适用于ID，因为它会将页面缓存到DOM中，因此，如果您打开一个页面，将其关闭，然后返回该页面，则您的页面可能在DOM内有两次（一个可见，一个隐藏/缓存） ）。因此，当您执行$("#searchWrapOuter")时，您不知道实际上要处理哪个元素（在您的情况下，可能是隐藏的元素）。

Answer 2

您可以手动将延迟时间调整为500ms和1s。

Answer 3

我的问题是页面ID在页面标签下方。因此，一旦我将页面div移动到其上方，则javascript已包含在ajax页面加载中。上一个