在多个事件上触发功能

Question

如果左侧的文本长于右侧的图像，我已经写了一些代码来折叠2列：

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')
    }
}

我的问题是让此功能在正确的时间触发。 这有效：

$(window).resize(banner);

但是这些都不起作用...

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

我在这里可能完全走错了路，所以请随时指出正确的方向。

提前致谢！

Answer 1

根据JQuery的文档，jquery对象没有“ onload”方法，而应使用“ ready”：

$(window).ready(banner);

关于这条线没有被解雇，可能是因为您使用的是错误的合成器。“ on”方法的参考：

.on（事件[，选择器] [，数据]，处理程序）

所以你应该试试这个：

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

干杯

Answer 2

要在首次加载页面时运行，可以使用：

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

关于orientationchange事件，请确保您使用的是jquery.mobile.js（ https://api.jquerymobile.com/orientationchange/ ）