Question

我有一个我需要在显示页面时调用的函数，无论是通过标准页面加载还是通过jQuery Mobile的AJAX导航机制。目前，我的代码没有问题，但我觉得有更优雅的方式。

在我页面的页脚中，我有一些代码附加到该页面的pageshow事件。在pageshow上，它将关注文本框，执行警报（用于测试），然后从pageshow事件中取消绑定。如果我没有取消绑定，那么如果我离开页面然后返回它，则该事件将触发两次。对焦点事件来说并不是什么大不了的事，但是如果你通过警报尝试这个，你会发现它们开始堆积起来：P

var focusOnQuantity = function () {
    $("#quantity").focus();
    alert('test');
    $('body').undelegate('#reportProduction', 'pageshow', focusOnQuantity);
};

// Bind to this page's pageshow event when loaded via jQuery Mobile AJAX
$('body').delegate('#reportProduction', 'pageshow', focusOnQuantity);

我还有一个全局JS，里面我有一个jQuery保护功能，在这个页面直接加载的情况下，我进行相同的焦点调用。

(function ($) {
    $(function () {
        // For direct page load
        $("#quantity").focus();
    });
})(jQuery);

如何将代码封装到1个块中，以便它可以在pageload上用于标准导航，而pageshow用于AJAX导航？提前感谢您的帮助。

Answer 1

如果您只是绑定到pageshow事件，它将在初始加载以及随后的每个pageshow上触发：

$(document).delegate('#reportProduction', 'pageshow', focusOnQuantity);

如果此代码在全局范围内运行，则只应在pageshow页面上的#reportProduction个事件中运行一次。

这是上述解决方案的一个方面：http://jsfiddle.net/jasper/DHeva/（注意我已将“onLoad”首选项更改为“no wrap（body）”，这意味着代码被附加到{{{}的末尾1}}元素，不使用body）。

有没有更好的方法来附加到jQuery Mobile中的pageshow？

1 个答案: