jquery - 使用 jQuery 禁用点击事件

Question

我的问题与使用 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>

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

方法1:我尝试了以下方法:how to unbind all event using jquery

结果:它有效，用删除答案类解除了 anchor 的点击事件绑定(bind)，但是:

1) 它仅停用具有删除答案类别的 anchor 。我更愿意在 servlet 执行其操作时禁用所有链接。

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

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

结果:它适用于普通 anchor ，但不适用于具有删除答案类的 anchor 。

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

<小时/>

注意:还尝试更改执行此操作的类:$('.delete-answer').addClass('delete-disabled').removeClass('delete-answer');

它更改了类并仅保留了禁用删除的类的 anchor ，但是当我再次单击它们时，它们仍在删除消息，我不知道为什么:/

Answer 1

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

1. 将其添加到顶部:

   (function() {
   

2. 在底部添加此内容:

   })();
   

3. 在上面的顶行下方添加:

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

4. 在点击处理程序的顶部:

   if (!deleteAnswerEnabled) {
       return false;
   }
   

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;
   });
   

将所有这些结合在一起:

// (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)
})();

如果您感觉足够偏执，您可以使用计数器而不是 bool 值，但概念是相同的。