Отключить событие click с помощью 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>

Как видите, я попытался отключить событие click двумя способами:

Метод 1: Я попробовал следующий метод: как отменить привязку всехсобытие, использующее jquery

Результат: Работает, освобождая событие click от якорей с классом delete-answer, но:

1) Это только деактивирует якоря с классом delete-answer,Я предпочитаю отключать все ссылки, пока сервлет делает свое дело.

2) Я не могу (или не знаю, как) повторно включить ссылки.

Метод 2: Я попробовал следующий метод: Как динамически включить / отключить ссылки с помощью jQuery?

Результат: работает для обычных якорей, но не для якорей с классом delete-answer.

Оба кажутся несовместимыми, поэтому я действительно благодарен за некоторую помощь.

---

Примечание: также пыталсячтобы изменить класс следующим образом: $('.delete-answer').addClass('delete-disabled').removeClass('delete-answer');

Он меняет класс и оставляет привязки только с классом delete-disabled, но когда я снова нажимаю на них, они по-прежнему удаляют сообщение, а я нетзнаю почему: /

Answer 1

Используйте следующий код для этого:

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

Answer 2

Оберните весь этот код в функцию и используйте флаг.

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 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

Так как я не могу оставить комментарий, это решение вопроса Нуба на пост Дарма ( LINK ).

Я считаю, что страница использует в зависимости от того, что .bind был впервые реализован, если два .binds используются для одного и того же элемента.Поэтому вам нужно сначала .unbind , если вы хотите изменить настройку с FALSE на TRUE .Чтобы повторно включить щелчок, добавьте последний код к любой функции / событию, для которого вы хотите включить его.

DISABLE

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

RE-ENABLE

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

ТАКЖЕ , я не уверен почему, возвращаясь к TRUE не будет работать, если я не включу "jquery-ui.js".

Надеюсь, это поможет

Answer 5

Другое простое решение - просто .hide () / .show () ваш элемент click.