在我的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’),not $(document).ready()/$(function()
然而,当我从ajax链接进入时,我仍然无法使其工作.实现这些事件以使代码从Ajax链接进入工作的正确方法是什么？
谢谢,
解决方法
很可能是因为您使用的是ID而不是类. jQuery Mobile无法正常使用ID,因为它会将页面缓存到DOM中,因此如果您打开页面,关闭它,然后返回页面,您可能在DOM内部有两次页面(一个可见,一个隐藏/缓存) ).所以,当你执行$(“#searchWrapOuter”)时,你不知道你实际处理的是哪个元素(在你的情况下,可能是隐藏的元素).
解决方案是将您的ID更改为类.这不是很直观,但我发现这是使用jQuery Mobile的最佳方式.
另请注意文档中的这条评论可能也与您相关：
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
