使用 jQuery 禁用单击事件答案

【问题标题】：Disable click event with jQuery使用 jQuery 禁用单击事件
【发布时间】：2011-07-25 11:54:56
【问题描述】：

我的问题与使用 jQuery 禁用链接/单击事件有关，这可能比我认为的要容易。我注释了重要的代码以使其更容易。

我在 .js 文件中有以下代码：

$('.delete-answer').click(function(event) {
    event.preventDefault();

    // some actions modifying the tags    
    $('.output').closest('li').remove();
    var idMsg = ...;
    var action = ...;
    var answers = ...;
    $(this).closest('li').children('p').remove();
    $(this).closest('.tr').before('<tr><td><div class="output">Deleting message...</div></td></tr>');
    $(this).closest('.tr').remove();

    // While the servlet is deleting the message, I want to disable the links
    // but I can't, so my problem is just here

    // METHOD 1
    //$('a').unbind('click');

    // METHOD 2
    //$('a').bind('click', function(e){
    //    e.preventDefault();
    //});

    $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
    });

    // METHOD 1
    //$('a').bind('click');

    // METHOD 2
    //$('a').unbind('click');

    $('.output').empty();
    $('.output').append('Message deleted successfully.');

});

在我的 HTML 中，我有一些类似这样的列表项：

<li>
    <p class="text">Some text.</p>
    <table class="answer-details" style="width: 100%">
    <tbody>
        <tr class="tr">
            <td style="width: 50%;">
                <div class="msg-modification" display="inline" align="right">
                    <a id="modify" class="delete-answer" href="#">Delete</a>
                </div>
            </td>
        </tr>                               
    </tbody>
    </table>
</li>

如您所见，我尝试了两种方法来禁用点击事件：

方法一：我尝试了以下方法：how to unbind all event using jquery

结果：它可以使用 delete-answer 类从锚点中解除点击事件的绑定，但是：

1) 它只停用带有 delete-answer 类的锚点。我宁愿在 servlet 执行此操作时禁用所有链接。

2) 我无法（或者我不知道如何）重新启用链接。

方法二：我尝试了以下方法：How do I dynamically enable/disable links with jQuery?

结果：它适用于普通锚点，但不适用于删除答案类的锚点。

两者似乎不兼容，所以我真的感谢一些帮助。

注意：也尝试更改类这样做：$('.delete-answer').addClass('delete-disabled').removeClass('delete-answer');

它改变了类，只留下了禁用删除类的锚，但是当我再次单击它们时，它们仍在删除消息，我不知道为什么：/

【问题讨论】：

很难理解你在做什么。尝试使用 jsfiddle.net 重现您的问题，然后给我们一个指向该代码的链接。
@Deele，我不熟悉 jsfiddle，但我会看看。谢谢:)
@Buitrako：你也可以看看jsbin.com，它类似于jsFiddle，但适用于更广泛的浏览器。
@T.J. Crowder：这是一个非常有趣和有用的页面。谢谢。

标签： jquery hyperlink anchor event-binding

【解决方案1】：

将所有代码包装在一个函数中并使用一个标志。

在顶部添加：
```
(function() {
```
在底部添加：
```
})();
```

就在上面的第一行下面，添加：

// Flag for whether "delete answer" is enabled
var deleteAnswerEnabled = true;

在您的点击处理程序中，就在顶部：

if (!deleteAnswerEnabled) {
    return false;
}

将您的 post 更改为：

// Disable deleting answers while we're doing it
deleteAnswerEnabled = false;
$.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
     // Enable it again now we're done
    deleteAnswerEnabled = true;
});

将所有内容整合在一起：

// (1)
(function() {
    // (3)
    // Flag for whether "delete answer" is enabled
    var deleteAnswerEnabled = true;


    $('.delete-answer').click(function(event) {
        event.preventDefault();

        // (4)
        // Don't do it if we're disabled
        if (!deleteAnswerEnabled) {
            return false;
        }

        // some actions modifying the tags    
        $('.output').closest('li').remove();
        var idMsg = ...;
        var action = ...;
        var answers = ...;
        $(this).closest('li').children('p').remove();
        $(this).closest('.tr').before('<tr><td><div class="output">Deleting message...</div></td></tr>');
        $(this).closest('.tr').remove();

        // (5)
        // Disable deleting answers while we're doing it
        deleteAnswerEnabled = false;
        $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
             // Enable it again now we're done
            deleteAnswerEnabled = true;
        });

        $('.output').empty();
        $('.output').append('Message deleted successfully.');

    });
// (2)
})();

如果您感到足够多疑，您可能会使用计数器而不是布尔值，但概念是相同的。

【讨论】：

您很好地解释了您的答案，并且效果很好。非常感谢非常！ :)
不用担心，很高兴有帮助。
只有一点评论：您的解决方案禁用了 .delete-answer 锚点，所以我做了一些修改以禁用所有链接： $('a').click(function(event) { if ( !deleteAnswerEnabled) { event.preventDefault(); } });如果需要，您可以将此添加到您的回复中。再次，非常感谢。

【解决方案2】：

使用下面的代码来做：

$('a').bind('click', false);

【讨论】：

我觉得你的回答很有用，但使用这种方法的问题是稍后重新启用点击事件。

【解决方案3】：

定义一个单独的变量来跟踪您的删除状态：

var isDeleting = false; 

$('.delete-answer').click(function(event) {
   if (!isDeleting) {
      isDeleting = true;

      $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
          isDeleting = false;
      });      
   }
});

此外，如果锚点实际上不包含 URL，则不需要在锚点中添加 href 属性。完全删除它。

【讨论】：

我也听不懂：/ 我为你点赞，感谢你的贡献和提示！

【解决方案4】：

另一个简单的解决方案就是 .hide() / .show() 你的点击元素。

【讨论】：

【解决方案5】：

由于我无法发表评论，这是 Noob 在 Darm 帖子 (LINK) 上的问题的解决方案。

如果两个 .bind 用于同一个元素，我相信页面会使用最先实现的 .bind。因此，如果要将设置从 FALSE 更改为 TRUE，则必须先 .unbind 。要重新启用点击，请将后面的代码添加到您想要重新启用它的任何功能/事件中。

禁用

$('a').bind('click', true);

重新启用

$('a').unbind('click', false);
$('a').bind('click', true);`

ALSO，我不知道为什么，除非我包含“jquery-ui.js”，否则设置回 TRUE 将不起作用”。

希望对你有帮助

【讨论】：