Jquery Mobile Javascript 无法处理 ajax 负载 [英] Jquery Mobile Javascript not working on ajax load

问题描述

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

</表单>

将下面的javascipt/jquery加宽:

 $(function() {$(document).on("click", "#searchIcon", function () {var searchWrapper = $("#searchWrapOuter");$(searchWrapper).slideToggle();返回假；});});

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

我已阅读有关使用

<块引用>

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

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

谢谢，

解决方案

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

Have the following markup in my html page to toggle a search bar based on if a search icon is clicked:

<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>

Width the following javascipt/jquery:

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

This code works as expected on a page load direct off a Url. When coming into the page off a link which is Ajax loaded, loads the contents of the page into the DOM, and the DOM ready handler only executes for the first page.

I have read about using the

$(document).on('pageinit'), not $(document).ready()/$(function()

I still haven't been able to get this to work when coming in off an ajax link however. What would be the correct way to implement these events to get the code to work coming in from an Ajax link?

Thanks,

解决方案

Most likely it is because you are using IDs instead of classes. jQuery Mobile doesn't work well with IDs because it caches pages into the DOM so if you open a page, close it, then go back to the page, you might have your page twice inside the DOM (one visible, one hidden/cached). So when you do $("#searchWrapOuter") you don't know which element you are actually dealing with (in your case, probably the hidden one).

The solution is to change your IDs to classes. This is not very intuitive but I found that is the best way to work with jQuery Mobile.

Also note this comment in the doc which might also be relevant to you:

The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.

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

这篇关于Jquery Mobile Javascript 无法处理 ajax 负载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！