Отключить событие click с помощью 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: я попробовал следующий метод: как отменить привязку всех событий с помощью jquery

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

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

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

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

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

Оба кажутся несовместимыми, поэтому я очень ценю некоторую помощь.

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

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

Источник

5 ответов

Решение

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

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

Если вы чувствуете себя достаточно параноиком, вы можете использовать счетчик, а не логическое значение, но концепция та же.

Источник

Используйте следующий код, чтобы сделать это:

$('a').bind('click', false);
Источник

Определите отдельную переменную, которая отслеживает ваше состояние удаления:

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. Просто удалите это полностью.

Источник

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

Источник

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

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

DISABLE

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

RE-ВКЛЮЧИТЬ

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

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

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

Источник
Другие вопросы по тегам