使用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解除所有事件绑定 结果：它有效地从具有delete-answer类的锚点解除了点击事件，但是： 1）它只停用具有delete-answer类的锚点。在servlet执行其任务时，我更喜欢禁用所有链接。 2）我无法（或者我不知道如何）重新启用链接。 方法2: 我尝试了以下方法：如何使用jQuery动态启用/禁用链接？ 结果：它适用于普通的锚点，但不适用于具有delete-answer类的锚点。

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

注意：我也试图通过更改类来实现此操作：$('.delete-answer').addClass('delete-disabled').removeClass('delete-answer'); 它更改了类并仅保留了delete-disabled类的锚点，但当我再次单击它们时，它们仍然会删除消息，我不知道为什么 :/

- Noob

---

很难理解你在做什么。尝试使用jsfiddle.net来重现你的问题，然后给我们提供该代码的链接。 - Deele

@Deele，我不熟悉jsfiddle，但我会看一下。谢谢 :) - Noob

@Buitrako：你也可以看看http://jsbin.com，它类似于jsFiddle，但可以在更广泛的浏览器范围内使用。 - T.J. Crowder

@T.J. Crowder：那是一个非常有趣和有用的页面。谢谢。 - Noob

Answer 1

使用以下代码来完成：

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

- Darm

---

我认为你的回答很有用，但是使用这种方法后，问题在于如何稍后重新启用点击事件。 - Noob

Answer 2

将所有代码封装到一个函数中，并使用标志。

1. Add this at the top:

   (function() {
   

2. Add this at the bottom:

   })();
   

3. Just under the top line above, add:

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

4. In your click handler, right at the top:

   if (!deleteAnswerEnabled) {
       return false;
   }
   

5. Change your post to:

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

如果您足够担心，您可以使用计数器而不是布尔变量，但概念是相同的。

- T.J. Crowder

---

你解释得非常清楚，而且它完美地运行了。非常感谢你！ :) - Noob

只是一个小评论：您的解决方案禁用了“.delete-answer”锚点，因此我进行了一些修改以禁用所有链接: $('a').click(function(event) { if (!deleteAnswerEnabled) { event.preventDefault(); } }); 如果您愿意，可以将此添加到您的响应中。再次感谢。 - Noob

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

此外，如果锚点标签内并不包含URL，则无需在其中添加href属性。可以直接将其删除。

- Kon

---

我也不理解 :/ 我给你点赞，感谢你的贡献和建议！ - Noob

Answer 4

另一个简单的解决方案就是使用 .hide() / .show() 方法来隐藏或显示您的点击元素。

- northtree

Answer 5

由于我无法留下评论，这是对Darm帖子（LINK）中Noob问题的解决方案。

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

禁用

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

重新启用

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

另外，我不确定为什么将其设置回TRUE，除非我包含“jquery-ui.js”，否则无法正常工作。

希望这可以帮到你。

- SeaBass