JQuery：为什么元素的相对位置有时会返回窗口顶部（0,0）而在其他位置正确返回？ [英] JQuery: Why does relative positioning of element return top of window (0,0) at times and correctly at others?

问题描述

我正在尝试在ajax调用点显示忙碌的等待图标（即 event.target 或触发事件的对象）。我使用以下代码来实现这一点，但在某些情况下，返回的元素的位置（偏移量）是 top：0 和 left：0 - 我知道我可能犯了一个错误，但似乎无法指出它。这是我的代码（它在骨干视图类中，但这不重要，因为它非常简单）：

I am trying to show a busy waiting icon at the point of ajax invocation (i.e., event.target or object that fired the event). I use the following code to achieve that but in some cases the position (offset) of the element returned is top:0 and left:0 - I know I'm probably making a mistake but can't seem to nail it. Here's my code (It's in a backbone view class, but that shouldn't matter since it's quite trivial):

//ajax loading animation
var LoadingAnimation = Backbone.View.extend({

    tagName: 'div', //creates an empty div element

initialize: function() {
    var DOMElement = this.options.DOMElement; //is passed as a param (see below)
    var pos = DOMElement.offset();  //<-- pos.left and pos.top 0 for some elements??
    var _width = DOMElement.outerWidth(true);
    var _height = DOMElement.outerHeight(true);

            //setting the 'style' of 'this' div     
    $(this.el).css({
        "position":"absolute", 
        "left" : pos.left+"px",
        "top"  : pos.top+"px",
        "z-index" : 9999,
        "width" : _width+"px",
        "height": _height+"px",
        "background": "#FFFFFF url(images/loading_round.gif) no-repeat center center"
        });

            /*appending to body. Don't know if this is correct, but nothing would 
             *show if it was not done :(
             */

    $('body').append(this.el);

    //_.bindAll(this, 'render','unrender'); //ignore for now
    this.render();
},

render: function() {
    $(this.el).show();
},

unrender: function() {
    $(this.el).fadeOut("slow");
    $(this.el).remove();
}

});

以下是如何调用它：

$('.ajaxAble').click(function(event){

var showBusy = new LoadingAnimation({DOMElement:$(this)}); //create and render busy waiting

//do ajax calls here and call showBusy.unrender() in success/error

}

这适用于某些元素，但对于某些元素，offset（）返回0.我不知道为什么会这样？所有这些元素都有相对定位并且要显示的div具有绝对性。但是我没有看到冲突。（有一个吗？）。我需要让这个类尽可能地与位置无关，可以这么说......

This works fine for some elements but for some the offset() returns 0. I don't know why though? All of those elements have relative positioning and the div to be shown has absolute. But I don't see the conflict. (Is there one?). I need to make this class as position agnostic as possible, so to speak...

PS：我选择了本文中指出的本地非阻塞方式：

PS: I chose the local non-blocking way as pointed out in this post: Best way to have 'busy waiting' animation be 'position configurable' in jquery? (i.e., show it where the action is)

更新：（选择答案后）：Tom回复DOMElement的父级是正确的。但是为了使其正常工作，最好使用 .position（）而不是 .offset（）以上（如建议的那样）由rkw）。上面的代码附加到body（某些元素不正确）但是使用了offset。

UPDATE: (After selecting answer): Tom's answer of appending to parent of DOMElement is correct. However for that to work properly it's better to use .position() rather than .offset() above (as suggested by rkw). The above code appends to body (incorrect for some elements) but uses offset.

推荐答案

position的结果：relative将取决于父母的位置。如果您将此行为应用于不同的项目集合，则可能是他们的定位上下文与您所看到的行为完全不同。

The result of position:relative will depend on the position of the parent. If you're applying this behavior to a diverse collection of items, it may be the case that their positioning context is sufficiently different to cause the behavior you're seeing.

您看到的问题是否可重现？对于相同的元素它是否总是相同的？

Is the problem you're seeing reproducible? And is it always the same for the same elements?

编辑：这是您需要将新的加载指示符附加到页面的文档中的位置所需的代码你之前获得的职位信息是有道理的。

here's the code you need to append the new loading indicator to the page, at a place in the document where the position info you got earlier will make sense.

// $('body').append(this.el);
$(DOMElement).parent().append(this.el);

这篇关于JQuery：为什么元素的相对位置有时会返回窗口顶部（0,0）而在其他位置正确返回？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！