Jquery Mobile Javascript不适用于ajax加载答案

【问题标题】：Jquery Mobile Javascript not working on ajax loadJquery Mobile Javascript不适用于ajax加载
【发布时间】：2023-03-03 06:13:28
【问题描述】：

在我的 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;
        });
});

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

我已经阅读了关于使用

$(document).on('pageinit')，而不是 $(document).ready()/$(function()

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

谢谢，

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

很可能是因为您使用的是 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

【讨论】：

这是一个专业提示。当表单在几个不同的模型上呈现时（在不同的页面上，但每个页面仍被缓存），我遇到了一个错误。表单绑定到一个 div ID 并通过 AJAX 提交。刷新浏览器后表单将提交，但通过 AJAX 导航在页面之间导航时不会提交。我将表单更改为使用
，一切都很好。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我的问题是页面 ID 在页面标签下方。因此，一旦我将页面 div 移到它上面，javascript 就会包含在 ajax 页面加载中。在此之前

【讨论】：