javascript - 具有动态内容的完全加载 DOM 的 jQuery 事件监听器

Question

我正在尝试使用 jQuery 脚本来对齐两个 div 的高度。一切正常，直到我在其中一个 div 中有一些动态内容。当我在其中一个 div 中硬编码一些静态内容时，例如:

<br>asd<br>asd<br> x 20

两个 div 具有相同的高度属性，但是当我将一些数据从数据库加载到其中一个 div 时，它们是不同的。

我猜问题出在 .ready() 监听器中。文档说它会在 DOM 完全加载时触发，但事实并非如此。

我的问题是:我应该使用哪种监听器或其他“技巧”？我认为 jquery/javascript 解决方案比乱用 css 更干净，我想要这种解决方案。

提前致谢。

jquery 脚本:

$(document).ready(function(){
    var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();

    if(difference<0)
    {
        var height = $("#layout-content-wrapper").height() -1;
        $("#layout-navigation-wrapper").height(height);
    }
    else if(difference >= 0)
    {
        var height = $("#layout-navigation-wrapper").height() -2;
        $("#layout-content-wrapper").height(height);

    }   
});

Answer 1

基础中的 jquery 与事件 document.ready 一起工作意味着所有 DOM 都准备就绪，直到这里生成 jquery 代码。是因为没有渲染 jquery 库的情况下没有渲染 jquery 代码的选项

如果您想在所有 dom 加载时添加事件，包括您需要执行此操作的内容和图像

$(document).ready(function(){
$(window).load(function(){
    var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();

    if(difference<0)
    {
        var height = $("#layout-content-wrapper").height() -1;
        $("#layout-navigation-wrapper").height(height);
    }
    else if(difference >= 0)
    {
        var height = $("#layout-navigation-wrapper").height() -2;
        $("#layout-content-wrapper").height(height);

    }   
});
});