javascript - 弹出窗口出现在错误的位置

Question

JS fiddle :http://jsfiddle.net/Xw9QK/1/

我正在制作一个弹出窗口，并且让它工作，但是当我开始通过 ajax 加载内容并添加一个旋转器以首先出现时，它现在出现在错误的位置。

我认为问题在于旋转器会出现一个小弹出窗口，当内容加载时，它使用相同的 div 来添加 ajax 内容，然后在移动它之前调整框的大小。

现在有时它可以工作，在我的网站上，它似乎第一次不起作用，但是当关闭并再次打开它时，它会弹回到正确的位置!

谁能看出这里出了什么问题吗？

我正在使用此函数来重置位置:

function reset_popover_position(user_id) {
    var position = $('#link_' + user_id).position();
    console.log(position);
    var top_position = (position.top - $('.new_tooltip').outerHeight()) - 10;
    console.log(top_position);
    var left_position = (position.left - ($('.new_tooltip').outerWidth() / 2) + ($('#link_' + user_id).outerWidth() / 2));
    console.log(left_position);

    $('.new_tooltip').css({
        top: top_position + "px",
        left: left_position + "px"
    });

    return true;
}

Answer 1

setTimeout 解决了该问题。 <强> Fiddle 。

这是我在处理动态内容高度和宽度时使用的一个技巧。

我认为 1 的 setTimeout 为浏览器提供了足够的时间来渲染 html，因此，当 setTimeout 触发实际代码时，计算尺寸，一切都会给出正确的结果。

我在 toggle_popover 中添加了 setTimeout。

setTimeout(function() {
  reset_popover_position(user_id);
}, 1);