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

Jquery Mobile页面显示功能

1 个答案: