使用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： 我尝试了以下方法： 如何使用jQuery解开所有事件

结果：它有效，可以通过删除 - 答案类别从锚点中删除点击事件，但是：

1）仅用删除 - 答案类停用锚。我希望禁用 全部 servlet做的链接。

2）我不能（或我不知道该如何）重新启用链接。

方法2： 我尝试了以下方法： 如何动态启用/禁用与jQuery的链接？

结果：它适用于普通锚点，但不适合使用类删除式锚定的锚。

两者看起来都不兼容，所以我 真的 感谢一些帮助。

---

注意：还试图更改这样做的课程： $('.delete-answer').addClass('delete-disabled').removeClass('delete-answer');

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

Answer 1

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

1. 将其添加在顶部：

   (function() {
   

2. 将其添加到底部：

   })();
   

3. 就在上面的顶行下方，补充：

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

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

   if (!deleteAnswerEnabled) {
       return false;
   }
   

5. 改变你的 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)
})();

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

Answer 2

使用以下代码来执行此操作：

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

Answer 3

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

var isDeleting = false; 

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

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

另外，您不需要 href 如果锚固实际上不包含URL，则属性。只需完全删除它。

Answer 4

另一个简单的解决方案是hide（） / .show（）您的点击元素。

Answer 5

由于我无法发表评论，因此这是Noob在DARM帖子上的问题的解决方案（关联).

我相信该页面使用的是 .cind 如果两个 .binds 用于同一元素。所以你必须 .unbind 如果您想更改设置，请首先 错误的 至 真的. 。要重新启用单击后，将后一个代码添加到任何功能/事件中，您都希望重新启用它。

禁用

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

重新启用

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

还, ，我不确定为什么要回到 真的 除非我包括“ jquery-ui.js”，否则行不通。

希望这可以帮助