Отключить событие 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-Disaks, но когда я нажимаю на них снова, они все еще удаляют сообщение, и я не знаю, почему:/

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

Поскольку я не могу оставить комментарий, это решение для вопроса Ноба на посте Дарма (ССЫЛКА НА САЙТ).

Я считаю, что страница использует то, что .связывать был впервые реализован, если два .binds используются для того же элемента. Так что вы должны .unbind это сначала, если вы хотите изменить настройку с ЛОЖНЫЙ к ПРАВДА. Анкет Чтобы повторно включить щелчок, добавьте последний код в любую функцию/событие, которое вы хотели бы повторно его.

ЗАПРЕЩАТЬ

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

Повторно

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

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

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