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

时间:2017-12-06 14:02:43

标签: jquery ajax twitter-bootstrap jquery-ui

当执行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()

1 个答案:

答案 0 :(得分:0)

我解决了我的问题,我删除并添加了一个类,只是让部分禁用而不是隐藏,但它是一个解决方法,问题仍然存在。为什么我们隐藏后可见的元素没有位置信息。

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