Привязка к готовности и изменение размера одновременно с помощью jQuery .on () - PullRequest
Новая
       2

Привязка к готовности и изменение размера одновременно с помощью jQuery .on ()

7 голосов
/ 23 января 2012

Это работает для запуска одного и того же кода как на готовом, так и на изменение размера: 

$(document).ready(function() {

    $(window).resize(function() {

         // Stuff in here happens on ready and resize.

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

});//ready

Как бы вы достигли того же результата, используя jQuery.on () ?

Ответы [ 3 ]

14 голосов
/ 23 января 2012

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() для добавления готовых обработчиков следует помнить о 2 различиях:

  • Обработчики готовности, добавленные с помощью $(fn) и $(document).ready(fn), запускаются «ретро», а добавленные .on() нет.Используя их, если вы добавите обработчик после того, как DOM уже загружен, fn будет запущен немедленно.Если вы добавите обработчик через .on('ready', fn) после загрузки DOM, jQuery будет запускать не , но вы можете .trigger('ready') вручную.

  • Когда вы используете $(fn) или $(document).ready(fn) для добавления обработчика готовности, fn получает jQuery в качестве 1-го аргумента, позволяяСемейное jQuery(function($){ }) использование.Если вы используете $(document).on('ready', fn), 1-й аргумент, который получает fn, - это объект события .В обоих случаях this внутри fn является document.Если бы вы сделали что-то ненормальное, например, $('#foo').on('ready', fn) для запуска, this был бы элементом #foo.

4 голосов
/ 23 января 2012

.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

Вот демоверсия: http://jsfiddle.net/qMBtP/

0 голосов
/ 28 апреля 2016

Свяжите это событие загрузки и изменения размера, как показано ниже: 

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

Гораздо проще - надеюсь, это поможет.

...