使用jQuery，window.resize事件不会被触发？

kokeuurv 于 2023-05-22 发布在 jQuery

关注(0)|答案(2)|浏览(130)

目标：动态改变每个分割元素的高度，以便相邻列中的相对元素水平对齐--就像UL LI LI，但没有实际的列表。
如果窗口超宽，每个项目可能只有1行;但是在窗口收缩的情况下，每个项目可以具有唯一的行计数;例如

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

jquery

来源：https://stackoverflow.com/questions/47689876/using-jquery-window-resize-event-is-not-triggered

2条答案

按热度按时间

n9vozmp41#

似乎你有一个简单的语法错误行

height: $maxItemHeight + 'px';

删除;，这在对象定义中是不允许的，当加载页面时，错误应该在浏览器控制台中可见。
也可以使用resizer();或简单的$(window).on('resize', resizer);来调用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>

赞(0）回复(0）举报 2023-05-22

c7rzv4ha2#

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

$(document).ready(function() {

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

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

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

})

加上建议删除分号加上一个非常非常愚蠢的错误与我的HTML标记…

赞(0）回复(0）举报 2023-05-22

我来回答

使用jQuery，window.resize事件不会被触发？

2条答案

相关问题

热门标签

最新问答