JQuery: предотвращение запуска других событий при выполнении определенного действия

Question

Как я уже упоминал в заголовке, я хотел бы предотвратить запуск события при запуске другого события:

Давайте рассмотрим этот пример:

   $(function() {

$("#security_code").bind('change', function () {
  // Do validation and show errors
});

$("#reloadCaptcha").bind('click', function () {
  // generate new captcha and clear 'secuirity code' field

 // clear the field so the user will enter the new generated security code
  document.getElementById('security_code').value = '';
});

});

НАЗНАЧЕНИЕ: запретить запуск события change при нажатии кнопки «#reloadCaptcha».

Когда я нажимаю на ссылку (второе событие), первое событие также срабатывает (так как активируется «изменение»). Я ищу, чтобы остановить все события "изменения", когда ссылка фактически нажата. Надеюсь, я был достаточно ясен. У кого-нибудь есть какие-либо идеи?

И да, я попробовал unbind, stopPropagation и другие функции из документации jQuery, но это просто не сработало.

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

Заранее спасибо, ребята! Я надеюсь, что есть кто-то, кто сможет прояснить это для меня.

Answer 1

$(function() {

    $("#security_code").bind('change', function () {

        // If #security_code is empty do nothing
        if ($('#security_code').val() == '')
        {
            return;
        }

        // Otherwise validate...

    });

    $("#reloadCaptcha").bind('click', function () {

        // generate new captcha and clear 'secuirity code' field

        // clear the field so the user will enter the new generated security code
        $('#security_code').val('');

    });

});

Answer 2

• DEMO: http://jsbin.com/itire4/2

$(function() {
    $("#security_code").bind('change',function() {
        if ($(this).val() == 'something') {
            $(this).bind('change');
             //do something else...
        }
    });

    $("#reloadCaptcha").bind('click',function() {
        $("#security_code").val('').unbind('change');
    });
});

PS: один из Тимотиклиффорд тоже хорошо.

Answer 3

Вот новая версия моего кода:

$(function() {

$("#security_code").bind('change', function () {
  // Do validation and show errors
});

$("#reloadCaptcha").bind('click', function () {
  // generate new captcha and clear 'secuirity code' field

 // clear the field so the user will enter the new generated security code
  document.getElementById('security_code').value = '';
});

});

НАЗНАЧЕНИЕ: предотвратить запуск события «change» при нажатии кнопки «#reloadCaptcha».

Answer 4

Трудно ответить, не видя весь код, но, возможно, поможет следующий код. Я знаю, что это не идеальное решение, но может помочь;

$("#username").bind('change', function () {
    if ( $('body').data('linkClicked') !== 1 )
    {
        // Validate field when element loses focus
    }
});

$("#link_id").bind('click', function () {
    $('body').data('linkClicked', 1);
    // Do something when the a specific link is clicked
});

Answer 5

Из документации jQuery:

Чтобы остановить выполнение других обработчиков после одной привязки с использованием .live (), обработчик должен вернуть false.Вызов .stopPropagation () этого не сделает.

Вы пытались использовать .live () вместо .bind () и возвращать false?

Answer 6

Если код, который срабатывает при нажатии $("#link_id"), не изменяет элемент $("#username"), событие изменения не должно запускаться ... Но в любом случае event.preventDefault () должно делать то, что вы хочу.