Auslösen einer Funktion auf mehrere Ereignisse

Question

ich einige Code geschrieben habe 2 Spalten zusammenbrechen, wenn der Text auf der linken Seite ist länger als das Bild auf der rechten Seite:

var collapsed = null; 
var banner = function() { 
    var txt = $('.banner .text').outerHeight(); 
    var image = $('.banner .main-image').outerHeight(); 
    if (txt > image) { 
     // Collapse columns 
     $('.banner').addClass('single-line'); 
     // Set the breakpoint the column collapsed at 
     if (collapsed == null) { 
      collapsed = $(window).width(); 
     } 
    } 

    // Restore the 2 columns when the browser hits the breakpoint 
    if ($(window).width() >= collapsed) { 
     $('.banner').removeClass('single-line') 
    } 
} 

Mein Problem dieser Funktion wird immer bei auszulösen die richtigen Zeiten. Dies funktioniert:

$(window).resize(banner); 

Aber keiner dieser Arbeit ...

$(window).onload(banner); // When the page first loads 
$(window).on('orientationchange', banner); // When device is rotated 

ich hier auf die falschen Spuren vollständig sein könnte, so wenden Sie sich bitte mich frei fühlen in die richtige Richtung zu weisen.

Vielen Dank im Voraus!

Answer 1

in der Dokumentation von JQuery Acording, gibt es keine „onload“ -Methode für das jQuery-Objekt, stattdessen sollten Sie „ready“ verwenden:

$(window).ready(banner); 

Über diese Linie nicht gefeuert zu werden, wahrscheinlich, weil Sie "re mit dem falschen Synthax die Referenz für "on" -Methode.

.on (Ereignisse [Selektor] [Daten], handler)

so sollten Sie dies versuchen:

$(window).on('orientationchange','window', banner) 

Prost

Answer 2

auszuführen, wenn die Seite erste Last, die Sie verwenden können:

$(document).ready(function() { 
    banner(); 
}); 

In Bezug auf die orientationchange Veranstaltung, stellen Sie sicher, dass Sie die jquery.mobile.js verwenden (https://api.jquerymobile.com/orientationchange/)