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

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)添加的现成处理程序是“复古”，而.on()添加的处理程序则不是。使用这些，如果在DOM加载后添加处理程序，将立即触发fn。如果在加载DOM之后通过.on('ready', fn) 添加处理程序，它将不由jQuery触发，但您可以手动.trigger('ready')它。

当您使用$(fn)或$(document).ready(fn)添加就绪处理程序时，fn会收到 jQuery 作为其第一个arg，允许熟悉{ {1}}用法如果您使用jQuery(function($){ })，则fn收到的第一个参数是 event object 。在这两种情况下，fn中的$(document).on('ready', fn)都是this。如果您为了触发而执行document之类的异常操作，$('#foo').on('ready', fn)将成为this元素。

Answer 2

.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/

Answer 3

将load和resize事件绑定如下：

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

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

绑定准备好并使用jQuery同时调整大小.on（）

3 个答案: