javascript - div 没有加载到正确的位置

Question

您好，如果未经身份验证的用户单击，我正在尝试加载链接/按钮旁边的 div。

我有以下内容:

$(function () {

    $(".unauthenticated").click(function () {
        ShowMessage($(this).attr("id"), "#unauthenticated-div")
    });

    function ShowMessage(clickedItemId, divId) {

        clickedItem = $("#" + clickedItemId);
        var pos = clickedItem.offset();
        var width = clickedItem.width();

        $(divId).css({
            "left": pos.left + width + 10,
            "top": pos.top + 10
        }).show();
    }
});

<div id="unauthenticated-div" title="Please Login" style="display: none;">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
    </span>You must <a href="#" id="login-link">login</a>or <a href="/Account/Register/">Register</a>to do this</p>
</div>

它显示了 div，但不在单击的链接旁边。当我单步执行代码时，pos 和 width 符合预期。

Answer 1

您设置位置的元素是否将其 position 属性设置为 absolute 或 relative？

如果没有，尝试设置它。

    $(divId).css({
        "left": pos.left + width + 10,
        "top": pos.top + 10,
        "position":"absolute"
    }).show();

---

此外，您更新后的 HTML 问题没有显示具有 "unauthenticated" 类的元素。

不确定这是否是问题的一部分，但是 click 被分配给 $(".unauthenticated")。