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

【问题标题】：jquery click once, then disable/enable elementjquery 单击一次，然后禁用/启用元素
【发布时间】：2009-10-08 08:52:20
【问题描述】：

我有很多行

列表项 - 删除
列表项 - 删除
列表项 - 删除

像上面的 3 行.. 它有删除链接，单击时我想禁用该链接，直到我得到 ajax 的响应说可以删除它或不可以，不要删除它，用户不是所有者，然后我必须将元素返回给可点击的..如果这有意义

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

为此我需要使用哪些方法？我用的是live方法，如果我用die，那我要怎么恢复呢？

【问题讨论】：

标签： jquery ajax element selector

【解决方案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;
});

【讨论】：

如何使用链接而不只是按钮来完成...但是您可以通过设置按钮的禁用属性来禁用点击，但不知道如何禁用链接。

【解决方案2】：

最好的方法是创建一个单独的函数来处理 AJAX 调用，所以你可以这样做

$(".delete").bind("click", deleteItem);

在你的 deleteItem 函数中，你可以通过这样做来解除绑定

function deleteItem(delBtn) {
    $(delBtn).unbind("click", deleteItem);
    //ajax call
    onerror: function() {
        $(delBtn).bind("click", deleteItem);
    }
}

编辑：意识到您正在使用live，这只是bind 的另一个版本。所以在上面的例子中，你可以把bind关键字换成live，把unbind换成die。它应该做同样的事情（：

【讨论】：

live 方法.. 绑定不会对 ajax 自动支持有用
我理解生与死是一样的。但是如果你调用 die，那么它将杀死所有元素事件，而不仅仅是单个事件。并且 live 为所有元素设置一个事件，就像 bind.. 但它继续在新元素上添加更多事件，后来由 ajax 添加。真的死了不是解决这个问题的办法。
不，您可以使用 $(myElm).die("click", myClickEvent); 指定要“杀死”的事件，这会将所有其他事件留在元素上。