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= ..这意味着id实际上并没有发送，我没有得到我期待的结果。

我可以确认每个<li> DOES都有一个合适的id字段。

任何帮助/建议多多赞赏！

Answer 1

试试这个，

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

对于您的html，请在<li>

中的所有<ul>的title属性中定义条目ID

如果没有错误，这应该有效，因为只有在点击<li>时才调用AJAX函数，并且每个<li>的title属性都是唯一的，每次都会产生唯一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。

AJAX回调函数间歇性地无法添加GET参数

3 个答案: