javascript - 我的 jquery 加载覆盖层并不每次都显示

Question

无论出于何种原因，即使相同的代码几天前还在工作，我的 jquery 加载覆盖在任何情况下都根本无法加载。好吧，代码不完全相同。我一直在尝试让覆盖层随窗口调整大小，并且我一直在尝试不同的事情，但我不明白我做了什么导致覆盖层根本不显示？以下是应附加到正确 div 的覆盖层的代码...

function MRNSearchInternals()
{
    //debugger;
    var form = $("#MRNSearch");
    $div = $("#TabView1");
    var srlzdform = form.serialize();
    var PopID = <% =PopID %>;
    var options = [];
    var $url = $("#target").attr("action");
    $('<div id="overlay">').css({
        position: 'absolute',
        opacity: 0.2,
        top : $div.offset().top,
        left : $div.offset().left,
        width : $div.offset().width,
        height : $div.outerHeight(),
        background: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo($div);    

    $("#overlay").fadeIn();
    $.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data) 
    {                   
        DisplayDemographicSearch(data);
        $("#overlay").fadeOut();
    });
}

注意我如何创建 div。我给它一个 id，然后我称它为 css 属性。从那里我设置了所有的 css 属性。然后我尝试在 ajax 调用后调用 fadeIn 和 fadeOut 。任何人都知道为什么这不起作用？任何帮助都会很棒。

更多说明

另请注意我如何选择要覆盖的 div。我从我的 dom 获取一个 div id

    $div = $("#TabView1");

此外，我查看了源代码，其中确实有那个特定的 div。所以这不是问题。不知何故，它根本没有出现。更新:我得到的 DOM下面是 jquery 代码生成的内容。似乎一切都被创造得很好。另请注意，该显示设置为无。这就是我所期望的，因为我的叠加层淡出了。我的问题是为什么它永远不会出现。

<div class="TabView" id="TabView1">
    <div class="Tabs">...</Tabs>
    <div class="Pages">
    <div id="overlay" style="left: 114px; top: 205px; height: 452px; display: none; position: absolute; opacity: 0.2; background-image: url("/images/ajax-loader.gif"); background-attachment: scroll; background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: blue;"/>
</div>

Answer 1

嗯，创建覆盖 div 的更好方法是

$('<div/>', {
    id: 'overlay'
})

这能解决问题吗？否则，该 ID 可能不会被创建，是吗？

更新您帖子中的编辑内容:创建的叠加层上未设置“width” 属性。如果添加并设置为例如会发生什么？ 100 像素？看来是width属性的设置(或者$div的width属性的获取)有问题。