使用jQuery禁用点击事件

我的问题是关于使用jQuery禁用链接/点击事件，它可能比我看起来更容易。我评论了重要的代码以使其更容易。使用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>

正如你所看到的，我尝试了两种方法禁用Click事件：

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

结果：它起作用，从具有删除答案类的锚点解除绑定点击事件，但是：

1）它仅使用delete-answer类停用锚点。我宁愿要禁用所有的链接，而servlet正在做它的东西。

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

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

结果：它适用于正常锚，而不是与类中删除应答的锚。

两者似乎不相容，所以我想真的欣赏一些帮助。

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

它改变了类和叶锚只删除禁用类，但是当我再次点击他们，他们还在删除消息，我不知道为什么：/

来源

2011-07-25 Noob

这很难理解你在做什么。尝试使用jsfiddle.net重现您的问题，然后给我们一个链接到该代码。 – Deele

@Deele，我没有熟悉jsfiddle，但我会看看。谢谢:) – Noob

@Buitrako：你也可以看看http://jsbin.com，它就像jsFiddle，但可以在更广泛的浏览器中使用。 –

总结所有这些代码的功能和使用的标志。

顶部补充一点：
```
(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) 
})();

如果你感觉非常多疑，你可以使用计数器而不是布尔值，但概念是相同的。

来源

2011-07-25 12:01:10

你很好地解释了你的答案，它完美地工作。非常感谢你！ :) – Noob

不用担心，很高兴帮助。 –

只有一点点评论：您的解决方案禁用.delete-answer锚点，所以我做了一些修改以禁用所有链接：$（'a'）。click（function（event）{if（！deleteAnswerEnabled）{event}。 preventDefault（）; }}）;如果需要，您可以将其添加到您的回复中。再次，非常感谢。 – Noob

定义一个独立的变量，让您的删去状态的轨迹：

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。完全删除它。

来源

2011-07-25 11:58:12 Kon

真的吗？没有解释的投票。真？ – Kon

我也不明白：/我为你高兴，谢谢你的贡献和小费！ – Noob

使用下面的代码来做到这一点：

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

来源

2011-07-25 11:58:25 Darm

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

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

来源

2011-12-29 04:19:15 northtree

既然不能发表评论，这是菜鸟对DARM的帖子（LINK）问题的解决方案。

相信页面会使用任何.bind如果两个.binds用于相同元素首次实施。所以，你必须.unbind首先，如果你想将设置从FALSE更改为TRUE。要重新启用点击，请将后面的代码添加到您希望重新启用它的任何功能/事件中。

DISABLE

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

重新启用

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

ALSO，我不知道为什么，设置回TRUE不会除非我工作包括“jquery-ui.js”。

希望这会有所帮助

来源

2013-11-01 17:57:22 SeaBass

使用jQuery禁用点击事件

回答

相关问题