Bind a pronti e ridimensionare allo stesso tempo utilizzando jQuery .on()

Question

questo funziona per l'esecuzione lo stesso codice su entrambi pronti e ridimensionare:

$(document).ready(function() { 

    $(window).resize(function() { 

     // Stuff in here happens on ready and resize. 

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

});//ready 

Come ti ottenere lo stesso risultato utilizzando jQuery.on()?

Answer 1

on può essere utilizzato per cablare gli eventi di ridimensionamento e pronto come qualsiasi altro evento.

Quindi per il vostro caso, è possibile creare una funzione che ha il codice che si desidera accadere per resize e ready, per poi passarlo a entrambe le chiamate a on.

Se si desidera mantenere l'ambito racchiude pulita, si potrebbe fare tutto questo in una funzione immediata esecuzione:

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

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

2012-07-25: Ci sono 2 differenze di essere a conoscenza di quando si utilizza .on() per fissare i gestori pronti:

• gestori pronti aggiunti tramite $(fn) e $(document).ready(fn) sono "retro-fired", mentre quelli aggiunti da .on() non lo sono. Usando quelli, se aggiungi un gestore dopo che il DOM è già stato caricato, il comando fn verrà attivato immediatamente. Se si aggiunge un gestore tramite .on('ready', fn)dopo il DOM è stato caricato, sarà non essere licenziato da jQuery, ma è possibile manualmente .trigger('ready') esso.

• Quando si utilizza $(fn) o $(document).ready(fn) per aggiungere un gestore pronto, il fn riceve jQuery come il suo primo arg, permettendo al familar jQuery(function($){ }) utilizzo. Se si utilizza $(document).on('ready', fn), il primo argomento che riceve fn è uno event object. In entrambi i casi this all'interno del fn è il document. Se si dovesse fare qualcosa di anormale come $('#foo').on('ready', fn) allo scopo di triggerare, this sarebbe l'elemento #foo.

Answer 2

.ready(), .resize(), e altri come .mouseover() sono tutti solo scorciatoie per l'utilizzo della funzione .bind() (o .on() in jQuery 1.7+). .resize(function() {}) mappe a .bind('resize', function() {}). Ecco come il codice sarà utilizzando .on() ove possibile:

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

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

     // Stuff in here happens on ready and resize. 

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

});//ready 

Ecco una demo: http://jsfiddle.net/qMBtP/

Answer 3

Bind esso sia il carico e ridimensionare evento, come di seguito:

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

Molto più semplice - spero che questo ti aiuti.