AJAX回調函數間歇性無法添加GET參數

Question

我有一個<ul> ，每個<li>的ID都類似於<li id='entry24'> 。 單擊一個后，我需要通過將獲取請求發送到/query/getEntry/id=24來向服務器查詢該條目信息。

使用此代碼：

for(var entry = 0; entry < entryIds.length; entry++) {
    $("#entry" + entryIds[entry]).click(function() {
        $.get(
            "/query/getEntry",
            {id: entryIds[entry]},
            getEntryCallback,
            "html"
        )
    });
}

我發現每個請求都發送相同的ID-最后一個條目的ID。 經過研究，我將代碼修改為：

for(var entry = 0; entry < entryIds.length; entry++) {
    var entryId = entryIds[entry];
    $("#entry" + entryId).click(function(event) {
        $.get(
            "/query/getEntry",
            {id: event.target.id.replace("entry", "")},
            getEntryCallback,
            "html"
        )
    });
}

效果更好（每個<li>發送正確的ID）。 但是，在Firebug控制台上，我可以看到每次單擊都發出了請求，但是大約有75％的時間它們以紅色顯示/query/getEntry/id= 。得到我期望的結果。

我可以確認每個<li>都具有適當的id字段。

任何幫助/建議非常感謝！

Answer 1

嘗試這個，

$('ul li').click(function(){
    entryid = $(this).attr('title');
    $.get(
        "/query/getEntry",
        {id: entryid.replace("entry", "")},
        getEntryCallback,
        "html"
    )
});

對於您的html，在<ul>所有<li>的title屬性中定義條目ID。

如果沒有錯，這應該起作用，因為僅當單擊<li>並且title屬性對於每個<li>是唯一的時才調用AJAX函數，從而導致每次都有唯一的id。

Answer 2

這是最好的解決方案，請注意以下幾點：

$("li[id^='entry']").on("click",function() {
    var id = $(this).attr("id").substring(5);
    $.get(
        "/query/getEntry",
        {id: id},
        getEntryCallback,
        "html"
    );
});

Answer 3

我不確定您為什么在<li>遇到這個問題。 但是，請嘗試這樣做：

for(var entry = 0; entry < entryIds.length; entry++) {
    var entryId = entryIds[entry];
    $("#entry" + entryId).click(function(event) {
        $.get(
            "/query/getEntry",
            {id: entryId},
            getEntryCallback,
            "html"
        )
    });
}

在定義onclick處理程序時，這應該在entryId變量周圍形成一個閉包，以便為每個條目保留正確的ID。