jQueryMobile和切换DIV可见性

Question

我有奇怪的行为，我无法意识到如何解决它。

我有移动版的网络服务，在每个页面我都在DIV元素中放置搜索表单，整个容器应该用常见的jQuery .toggle()

切换

代码是（脚本直接放在页面的代码中，如示例中所示）：

<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()仅在重新加载后的第一个页面上有效，并且在下一页更改后无法再切换。 （BTW。页面加载了AJAX以保持转换等。）

我错过了什么？

Answer 1

如果脚本位于页面的头部，则在更改页面时不会运行脚本，因为Jquery Mobile会在第一页之后忽略头部。

一般来说，拥有多个具有相同ID的项目是不好的做法。最好让它们成为同一个类，然后让你的选择器找到那样的项目。