javascript 使用 jQuery .on() 同时绑定到就绪和调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8976092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bind to ready and resize at same time using jQuery .on()
提问by ryanve
This works for running the same code on both ready and resize:
这适用于在 ready 和 resize 上运行相同的代码：
$(document).ready(function() {
$(window).resize(function() {
// Stuff in here happens on ready and resize.
}).resize(); // Trigger resize handlers.
});//ready
How would you accomplish the same result using jQuery.on()?
您将如何使用jQuery.on()完成相同的结果？
回答by Adam Rackis
oncan be used to wire up the resize and ready events just like any other event.
on可用于连接调整大小和就绪事件，就像任何其他事件一样。
So for your case, you could create a function that has the code you want to happen for resizeand ready, and then pass it to both calls to on.
因此，对于您的情况，您可以创建一个函数，该函数具有您想要为resize和发生的代码ready，然后将其传递给对 的两个调用on。
If you want to keep your enclosing scope clean, you could do all this in an immediately executing function:
如果你想保持你的封闭范围干净，你可以在一个立即执行的函数中完成所有这些：
(function() {
function stuffForResizeAndReady(){
// Stuff in here happens on ready and resize.
}
$(window).on("resize", stuffForResizeAndReady);
$(document).on("ready", stuffForResizeAndReady);
})();
2012-07-25: There are 2 differences to be aware of when using .on()to attach ready handlers:
2012-07-25：使用.on()附加就绪处理程序时需要注意两个不同之处：
Ready handlers added via
$(fn)and$(document).ready(fn)are "retro-fired" while ones added by.on()are not. Using those, if you add a handler after the DOM is already loaded, the fn will be fired immediately. If you add a handler via.on('ready', fn)afterthe DOM is loaded, it will notbe fired by jQuery, but you can manually.trigger('ready')it.When you use
$(fn)or$(document).ready(fn)to add a ready handler, the fn receives jQueryas its 1st arg, allowing the familarjQuery(function($){ })usage. If you use$(document).on('ready', fn), the 1st arg that the fn receives is an event object. In both casesthisinside the fn is thedocument. If you were to do something abnormal like$('#foo').on('ready', fn)for the purpose of triggering,thiswould be the#fooelement.
通过添加的就绪处理程序
$(fn)和$(document).ready(fn)是“复古触发”，而添加的.on()则不是。使用这些，如果在 DOM 已经加载后添加处理程序， fn 将立即被触发。如果.on('ready', fn)在加载 DOM后添加处理程序 via ，它不会被 jQuery 触发，但您可以手动触发.trigger('ready')。当您使用
$(fn)或$(document).ready(fn)添加就绪处理程序时， fn 接收jQuery作为其第一个参数，允许使用熟悉的jQuery(function($){ })用法。如果使用$(document).on('ready', fn)，fn 接收的第一个参数是一个事件对象。在这两种情况下this， fn 内都是document. 如果你$('#foo').on('ready', fn)为了触发而做一些不正常的事情，那this就是#foo元素。
回答by Jasper
.ready(), .resize(), and others like .mouseover()are all just short-cuts for using the .bind()function (or .on()in jQuery 1.7+). .resize(function () {})maps to .bind('resize', function () {}). Here is how your code would look using .on()wherever possible:
.ready(), .resize(), 和其他类似.mouseover()的东西都只是使用该.bind()函数的捷径（或.on()在 jQuery 1.7+ 中）。.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
Here is a demo: http://jsfiddle.net/qMBtP/
这是一个演示：http: //jsfiddle.net/qMBtP/
回答by anti000gravity
Bind it both the load and resize event as below:
将它同时绑定 load 和 resize 事件，如下所示：
$(window).on('load resize', function () {
// your code
});
Much simpler - hope this helps.
更简单 - 希望这会有所帮助。
