jQueryMobile和切换DIV可见性 [英] jQueryMobile and toggling DIV visibility

问题描述

我的行为很奇怪，我不知道如何解决.

我有Web服务的移动版本，并且在将搜索表单放在DIV元素的每个页面上，应该使用通用jQuery的 <div id="search-area" style="display: none"> search form here... </div> <a href="#" id="search-area-switch" data-role="button">Search</a> <script type="text/javascript"> $('#search-area-switch').live('tap',function (event) { $('#search-area').toggle(); }); </script>

我的问题是，toggle()仅在重新加载后只能在第一页页面上使用，而在下一页之后则无法再进行切换切换. (顺便说一句，页面加载了AJAX，以保持过渡效果等.)

我错过了什么?

解决方案

如果脚本位于页面的开头，则在更改页面时将不会运行该脚本，因为Jquery Mobile会忽略第一页之后的标题. /p>

通常，拥有多个具有相同ID的商品是不明智的做法.最好让它们每个都属于同一类，然后让选择器以这种方式找到这些项.

I've got strange behaviour and I can't realize how to fix it.

I've got mobile version of web service and on every page I'm placing search form in DIV element, whole container should be toggled with common jQuery's .toggle()

The code is (script is placed directly in page's code, like in the sample):

<div id="search-area" style="display: none">
    search form here...
</div>

<a href="#" id="search-area-switch" data-role="button">Search</a>

<script type="text/javascript">
    $('#search-area-switch').live('tap',function (event) {
        $('#search-area').toggle();
    });
</script>

My problem is that toggle() works only on the first page after reload and after next page change toggling is not possible anymore. (BTW. pages are loaded with AJAX to keep transitions etc.)

What did I missed?

解决方案

If the script is in the head of the page it won't be run when you change pages, since Jquery Mobile ignores the head after the first page.

In general, having multiple items with the same id is bad practice. It's better to make them each the same class and then have your selector find the items that way.

这篇关于jQueryMobile和切换DIV可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！