隐藏后显示元素时JQuery位置没有信息

Posted 2023-05-08

【中文标题】隐藏后显示元素时JQuery位置没有信息

【英文标题】：JQuery position do not have information when showing an element after being hidden

【发布时间】：2018-05-20 10:41:10

【问题描述】：

我正在尝试在执行 ajax 成功回调时获取元素的位置，该回调在对 html() 函数的调用中已将内容添加到引导对话框。它返回 0

这是模态：

<div id="ShipmentModal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">@Resource.ShipmentDialogTitle...</h4>
            </div>
            <div id="ShipmentText" class="modal-body">
            </div>
            <div class="modal-footer">
                <a data-dismiss="modal" class="btn btn-primary" onclick="SaveOrder($('#ShipmentForm').serialize())">@Resource.Save</a>
                <a class="btn btn-primary" onclick="GetShipmentPrices($('#ShipmentForm').serialize())">@Resource.Execute</a>
                <button id="DismissShipmentModal" type="button" class="btn btn-default" data-dismiss="modal">@Resource.Close</button>
            </div>
        </div>
    </div>
</div>

这里是 ajax 调用：

$.ajax(
    url: '/Shipments/GetShipmentPrices',
    type: 'POST',
    data: Model,
    success: function (Result) 
        if (Result.Success) 
            $('#BusyIndicator').fadeOut(function () 
                            $('#DismissShipmentModal').click();
                            $('#PricesText').html(Result.View);
                            $('#PricesModal').modal('show');
                        );
        
        else 
            $('#BusyIndicator').fadeOut(function () 
                if (Result.Exception != "") 
                    $('#DismissShipmentModal').click();
                    $('#ResultText').html(Result.Exception);
                    $('#ResultModal').modal('show');
                
                else 
                    $('#ShipmentText').html(Result.View).promise().done(function () 
                        var Element = $(this).find(".field-validation-error:first").closest('.form-group');
                        $('.modal-body').animate( scrollTop: Element.position().top - 150 , 1300, function () 
                            var ControlName = $(".field-validation-error:first").data("valmsg-for");
                            var Control = $("input[name='" + ControlName + "']");
                            $(Control).focus();
                        );
                    );
                
            );
        
    ,
    error: function (jqXHR, textStatus, errorThrown) 
        $('#BusyIndicator').fadeOut(function () 
                        $('#DismissShipmentModal').click();
                        $('#ResultText').html(GetResponseText(jqXHR.responseText));
                        $('#ResultModal').modal('show');
                    );
    
);

我希望能够得到元素的位置

当对话框出现时，元素被隐藏，然后如果用户单击某个属性，该元素将呈现给用户，然后调用控制器去验证表单并返回，我应该能够获得元素位置，因为该元素已显示给用户，并且该位置应可通过 jquery position() 获得

【问题讨论】：

注意：我试图从中获取位置的元素在创建表单时隐藏，然后在进入控制器之前它变得可见，所以我想知道是不是因为元素被隐藏了起初问题来自那里但是我不明白为什么我在尝试在成功回调中获取它的位置之前让它可见

我尝试使用绝对位置的解决方案并留到 -999em 以保持元素可见但没有运气

【参考方案1】：

我通过删除和添加的类解决了我的问题，只是使该部分禁用而不是隐藏，但这是一种解决方法，问题仍然存在。为什么我们隐藏后可见的元素没有位置信息。

<style>
    .disableSection 
        pointer-events: none;
        background-color: lightgray;
        opacity: .3;
        padding-bottom: 5px;
    
</style>