jQuery Mobile Javascript无法在ajax负载上运行 [英] Jquery Mobile Javascript not working on ajax load

问题描述

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

宽度以下javascipt/jquery:

Width the following javascipt/jquery:

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

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

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.

我已阅读有关使用

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

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

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

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?

谢谢

推荐答案

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

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

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

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:

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

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