使用 jQuery .on() 同时绑定到就绪和调整大小

Question

这适用于在 ready 和 resize 上运行相同的代码：

$(document).ready(function() {

    $(window).resize(function() {

         // Stuff in here happens on ready and resize.

    }).resize(); // Trigger resize handlers.       

});//ready

您将如何使用jQuery.on() 实现相同的结果？

Answer 1

如下绑定加载和调整大小事件：

$(window).on('load resize', function () {
// your code
});

简单得多 - 希望这会有所帮助。

Answer 2

on 可用于连接调整大小和就绪事件，就像任何其他事件一样。

因此，对于您的情况，您可以创建一个函数，其中包含您希望为 resize 和 ready 发生的代码，然后将其传递给对 on 的两个调用。

如果你想保持你的封闭范围干净，你可以在一个立即执行的函数中完成所有这些：

(function() {
    function stuffForResizeAndReady(){
       // Stuff in here happens on ready and resize.
    }

    $(window).on("resize", stuffForResizeAndReady);
    $(document).on("ready", stuffForResizeAndReady);
})();

2012-07-25：使用.on() 附加就绪处理程序时需要注意两个区别：

• 通过$(fn) 和$(document).ready(fn) 添加的就绪处理程序是“retro-fired”，而.on() 添加的不是。使用这些，如果您在 DOM 已经加载后添加一个处理程序， fn 将立即被触发。如果你通过.on('ready', fn) 添加一个处理程序在 DOM 被加载，它不会 被jQuery 触发，但是你可以手动.trigger('ready') 它。

• 当您使用 $(fn) 或 $(document).ready(fn) 添加就绪处理程序时，fn 接收 jQuery 作为其第一个参数，从而允许熟悉的 jQuery(function($){ }) 用法。如果您使用$(document).on('ready', fn)，则 fn 接收的第一个参数是 event object。在这两种情况下，fn 内的this 是document。如果你为了触发而做一些异常的事情，比如$('#foo').on('ready', fn)，那么this就是#foo元素。

Answer 3

.ready()、.resize() 和其他类似.mouseover() 的方法都是使用.bind() 函数（或jQuery 1.7+ 中的.on()）的捷径。 .resize(function () {}) 映射到 .bind('resize', function () {})。以下是尽可能使用.on() 的代码外观：

$(document).on('ready', function() {

    $(window).on('resize', function() {

         // Stuff in here happens on ready and resize.

    }).trigger('resize'); // Trigger resize handlers.       

});//ready

这是一个演示：http://jsfiddle.net/qMBtP/