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，但不是單擊鏈接旁邊的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") 。

Answer 2

請參閱帕特里克的答案來設定絕對位置。 順便說一下，在第一個參數中傳遞你的對象可能會更好。

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

和

function ShowMessage(clickedItem, divId) {
    var pos = clickedItem.offset();
    var width = clickedItem.width();

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

Answer 3

“left”和“top”只有在div是position：relative時才有意義，然后只相對於最里面的位置相對或絕對封閉div（或者如果沒有則為body）。 使用Firebug或IE Developer Toolbar檢查...