jQuery函数无法在页面加载时触发，仅在刷新页面或再次重新访问同一页面后才起作用

Question

I need to give two div's pg-left-bar and pg-right-bar equal height based on which div is larger.

I have following jQuery code block and you can find following code log which i use to check div height.

Jquery doesnt seem to work if pg-right-bar has more height than pg-left-bar if i am visiting the page first time only and if i refresh or visit the same page again it works and gives both dives equal height.

I also tried be call do this in $(window).load(function () {}) but doesnt not make any different.

I am using asp.net web form master page for my design. I would appreciate help in this regard.

jQuery(document).ready(function () {
    App.init();
    App.initNavMenu();

    //Tabs
    App.InitCustomTabs();


    App.initMarqueeBrands();


    //set equal height of two div's
    //  $(".pg-right-bar").css({ "height": $("#pg-left-bar").height() })
    var leftbar = $(".pg-left-bar").height();
    var rightbar = $(".pg-right-bar").height()-4; // remove 4 pxels from righ div
    leftbar = leftbar - 20;

    if (leftbar > rightbar) {
        $(".pg-right-bar").css({ "height": $("#pg-left-bar").height() - 10 })
    }
    else {
        $(".pg-left-bar").css({ "height": $("#pg-right-bar").height() })
        $(".pg-right-bar").css({ "height": rightbar+"px" })
    }


    //activatte tooltip
    $('.tooltip').tooltipster();

});

Answer 1

Well I got the general gist of your question but the entire question description is pretty confusing so I'll try to just help you out where I think it counts.

var leftbar = $(".pg-left-bar").height();
var rightbar = $(".pg-right-bar").height();

if (leftbar >= rightbar) {
    $(".pg-right-bar").css({ "height": leftbar + "px" })
}else{
    $(".pg-left-bar").css({ "height": rightbar + "px" })
}

I omitted your magic numbers and the other code to make the change apparent but I think your issue was due to the lack of "px" being concatenated to the ends of your css declarations. If this isn't the issue would you mind showing a full example.

Answer 2

Make sure none of the App init calls generates any exceptions. Then try if this helps:

$(function () {
    App.init();
    App.initNavMenu();

    //Tabs
    App.InitCustomTabs();
    App.initMarqueeBrands();

    //set equal height of two div's
    var leftbar = $(".pg-left-bar :first").height() - 20;
    var rightbar = $(".pg-right-bar :first").height() - 4; // remove 4 pxels from righ div

    if (leftbar > rightbar) 
    {
        leftbar = leftbar + 10;
        $(".pg-right-bar").css({ "height": leftbar });
        $(".pg-left-bar").css({ "height": leftbar });
    }
    else 
    {
        $(".pg-left-bar").css({ "height": rightbar});
        $(".pg-right-bar").css({ "height": rightbar });
    }

    //activatte tooltip
    $('.tooltip').tooltipster();
});