jQuery Mobile 页面显示功能

Question

我正在使用 jqm 框架构建一个 webapp，并且在包含一个 jQuery 小部件 k3dcarousel 时，我一直在尝试使用 pageshow 函数。在有问题的页面上，我的脚本位于data-role="page" div 下方，

$("#page-about").live(
    "pageshow",
    function (event) {
        $('#k3dCarousel_portrait').k3dCarousel();
    }
);

似乎我需要点击我的链接两次才能加载 JS 函数，这会让我觉得我使用这个函数有误。另外，如果我不使用 $("#page-about").die(); pageshow 函数下的函数，如果我单击返回然后再次单击链接，脚本将被多次加载。

我使用pageshow 逻辑错了吗？有没有更好的方法来实现我正在尝试做的事情：AJAX 这个页面到我的移动框架中。

我知道这是一个相当具体的问题，但希望有一个通用的答案，因为在我看来这可能发生在任何小部件上。

非常感谢任何帮助，如果有帮助，我可以粘贴更多代码。

感谢您的宝贵时间。

Answer 1

由于您绑定到pageshow 事件，因此每次查看页面时都会触发匿名函数。如果您只想在页面的第一个视图上调用代码，请绑定到 pagecreate/pageinit 事件或检查您的 pageshow 代码中是否存在 k3dCarousel：

$("#page-about").live(
    "pageshow",
    function (event) {
        //check for the existence of HTML within the container element
        if ($('#k3dCarousel_portrait').html().length == 0) {
            $('#k3dCarousel_portrait').k3dCarousel();
        }
    }
);

这里是对所有 jQuery Mobile 特定事件的解释：http://jquerymobile.com/demos/1.0rc3/docs/api/events.html