使用jQuery，window.resize事件没有触发？

Question

目标：动态更改每个分区元素的高度，以便相邻列中的相对元素水平对齐——类似于 UL LI LI，但没有实际列表。

如果window超宽，每条可能只有1行；但是随着 window 收缩，每个项目可能有一个唯一的行数；例如

item 1      item 2
  1 line      2 lines

item 3       item 4
  3 lines      1 line

我想要的结果是通过

将所有项目调整为 3 行高

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

但是，这个window.resize事件没有触发？

为什么？

HTML:

<div class="parent">
    <div class="column extraPaddingOnRight">
<a href="links/headstone.pdf">Nancy at Arlington National Cemetery</a><p>
    </div>
</div>
<!-- other DIV links follow -->

CSS:

.extraPaddingOnRight {
    padding-right: 1.5em;
}

.column {
    float: left;
    /* Theoretically 50%, but less because of extraPaddingOnRight */
    width: 40%;
}

JS:

$(document).ready(function() {

    function resizer() {
        var $maxItemHeight = 0, $thisItemHeight;

        $('div.column a').each(function() {
            $thisItemHeight = $(this).height();
            if ($thisItemHeight > $maxItemHeight)
                $maxItemHeight = $thisItemHeight;
        });

        $('div.column a').each(function() {
            $(this).css( {
                height: $maxItemHeight + 'px';
            }); 
        });
    }

    $(window).on('resize', function() {
    /*
        alert('ok');   // not triggered?
    */
        resizer;
    });
});

Answer 1

您似乎在第

行有一个简单的语法错误

height: $maxItemHeight + 'px';

删除对象定义中不允许的 ;，加载页面时应该会在浏览器控制台中看到错误。

也可以使用 resizer(); 或简单地 $(window).on('resize', resizer);

来调用调整大小函数

完整的工作示例，您可能需要更改 jQuery 脚本的路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function() {

    function resizer() {
        var $maxItemHeight = 0, $thisItemHeight;

        $('div.column a').each(function() {
            $thisItemHeight = $(this).height();
            if ($thisItemHeight > $maxItemHeight)
                $maxItemHeight = $thisItemHeight;
        });

        $('div.column a').each(function() {
            $(this).css( {
                height: $maxItemHeight + 'px'
            }); 
        });
    }

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

        alert('ok');   // not triggered?

        // resizer;
    });
});
    </script>
</head>
<body>
<div id="testid">foo</div>
<button id="btnTest">Click me</button>
</body>
</html>

Answer 2

这是我的问题...吃了太多愚蠢的药...

$(document).ready(function() {

    $(window).resize(function() {
        resizer();
    });

 /*
    $(window).on('resize', function() {   // does not work!
        resizer();
    });
 */

 /*
    $(window).on('resize', resizer);       // does not work either! 
 */

})

连同建议删除分号以及我的 HTML 标记的一个非常非常愚蠢的错误 ...

所以...这是目前为止的产品：

My Tribute to my Bride Nancy

使用jQuery，window.resize事件没有触发？

Using jQuery, window.resize Event is not triggered?

jquery

resize

window