jquery 单击一次，然后禁用/启用元素

Question

我有很多行

1. 列表项 - 删除
2. 列表项 - 删除
3. 列表项 - 删除

像上面的3行..它有删除链接，点击后我想禁用该链接，直到我收到ajax的响应说可以删除它或不可以，不要删除它，用户不是所有者，然后我必须将元素恢复为可点击状态..如果这有意义的话

基本上防止点击元素，然后在错误时从后端恢复其元素。

我需要使用什么方法来实现此目的？我使用live方法，如果我使用die，那么我将如何再次恢复？

Answer 1

根据要求，这是一个使用链接而不是按钮的版本。

<ol>
    <li id="item-1">List item <a href="delete.php?1">Delete</a></li>
    <li id="item-2">List item <a href="delete.php?2">Delete</a></li>
    <li id="item-3">List item <a href="delete.php?3">Delete</a></li>
</ol>

JS对此的支持是

$("ol").click(function(evt){
    if (evt.target.nodeName != "A") {
        return true;// it's not the delete link, so we don't have to do anything
    }
    var listItem = $(evt.target.parentNode);
    if (listItem.hasClass("disabled")) {
        return true;// we're still processing this already deleted list item
    }
    listItem.addClass("disabled");// lock the list item (perhaps visually too)

    // set up the AJAX call
    $.post("evaluator.php", {listId : listItem.attr("id")}, function(data){
        // let's suppose that we get "1" if the user can perform the procedure
        if (data == "1") {
           // request approved, remove the list item
           listItem.fadeOut("fast", function(){
               $(this).remove();
           });
        } else {
            // release the lock
            listItem.removeClass("disabled");
            // request denied, rollback
            alert("Sorry, you can't do that.");
        }
    });
    // here we stop the click event, so the URL in href won't be called.
    // you can "disable" a link by returning false on a click event
    // e.g. <a href="url" onclick="return false">disabled link</a>
    return false;
});