Lier à ready et redimensionner en même temps en utilisant jQuery .on()

Question

Cela permet d'exécuter le même code à la fois sur ready et sur resize :

$(document).ready(function() {

    $(window).resize(function() {

         // Stuff in here happens on ready and resize.

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

});//ready

Comment obtiendriez-vous le même résultat en utilisant jQuery.on() ?

Answer 1

on peut être utilisé pour connecter les événements de redimensionnement et de préparation comme n'importe quel autre événement.

Dans votre cas, vous pourriez donc créer une fonction contenant le code que vous souhaitez voir apparaître pour resize y ready et le transmet ensuite aux deux appels à on .

Si vous voulez garder votre champ d'application propre, vous pouvez faire tout cela dans une fonction qui s'exécute immédiatement :

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

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

2012-07-25 : Il y a deux différences à prendre en compte lors de l'utilisation de .on() pour attacher des gestionnaires prêts à l'emploi :

• Des gestionnaires prêts à l'emploi ont été ajoutés par l'intermédiaire de $(fn) y $(document).ready(fn) sont "rétrofités", tandis que ceux ajoutés par les .on() ne le sont pas. En utilisant celles-ci, si vous ajoutez un gestionnaire après que le DOM soit déjà chargé, la fn sera déclenchée immédiatement. Si vous ajoutez un gestionnaire via .on('ready', fn) après le DOM est chargé, il pas est déclenchée par jQuery, mais vous pouvez manuellement .trigger('ready') il.

• Lorsque vous utilisez $(fn) o $(document).ready(fn) pour ajouter un gestionnaire prêt, la fn reçoit jQuery en tant que 1er arg, permettant au familier jQuery(function($){ }) l'utilisation. Si vous utilisez $(document).on('ready', fn) le 1er arg que le fn reçoit est un objet de l'événement . Dans les deux cas this à l'intérieur de la fn est la document . Si vous faisiez quelque chose d'anormal comme $('#foo').on('ready', fn) aux fins de déclenchement, this serait le #foo élément.

Answer 2

.ready() , .resize() et d'autres comme .mouseover() ne sont que des raccourcis pour utiliser la fonction .bind() (ou .on() dans jQuery 1.7+). .resize(function () {}) les cartes de .bind('resize', function () {}) . Voici à quoi ressemblerait votre code en utilisant .on() dans la mesure du possible :

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

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

         // Stuff in here happens on ready and resize.

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

});//ready

Voici une démonstration : http://jsfiddle.net/qMBtP/

Answer 3

Liez-le à la fois à l'événement de chargement et de redimensionnement comme ci-dessous :

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

C'est beaucoup plus simple - j'espère que cela vous aidera.