removeClass() удаляет класс, но jQuery запоминает его

На странице HTML

<input type='text' name='quantity' id='quantity' />

<div class='submit'>Submit</div>`

В JS

$(document).ready(function(e)
{
   $('input#quantity').keyup(function()
   {            {
      if($.isNumeric($('input#quantity').val())==true)
      {
    $('.submit').addClass('submit_success');
      }
      else
      {
    $('.submit').removeClass('submit_success');
      }
   });


   $('.submit_success').click(function(e)
   {
      document.write("The DIV is clicked");
   });
});

Таким образом, идея состоит в том, что когда кто-либо вводит числовое значение в поле input, <div class='submit'> будет добавлен класс «submit_success» и будет выглядеть как <div class='submit submit_success'>.

Наблюдения:

  1. Добавить класс 'submit_success' правильно работает при вводе числового значения.

  2. Удаление класса работает правильно, когда пользователь вводит алфавит или редактирует числовое значение с помощью алфавита.

  3. Функция щелчка выполняется правильно, когда пользователь вводит числовые данные и нажимает на <div>

Проблема возникает, когда,

ШАГ 1: Пользователь вводит число в текстовое поле. Таким образом, часть добавления класса выполняется.

ШАГ 2: Теперь пользователь удаляет число, которое он набрал, и пишет алфавит в текстовом поле. Теперь выполняется часть удаления класса, и класс submit_success удаляется.

Но все же функция щелчка активна. Когда пользователь нажимает на <div>, он пишет на экране "DIV нажат". Но я думаю, что это не должно быть выполнено.

Как решить эту проблему?


jquery addclass removeclass
person Sarvap Praharanayuthan    schedule 20.08.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Переключение на on() вместо click() устраняет описанную вами проблему. Также в обработчике событий для keyup можно использовать событие $(this).val() для получения значения input вместо использования селектора.

JavaScript

   $('input#quantity').keyup(function()
   {            
      if($.isNumeric($(this).val())==true) //simplified
      {
        $('.submit').addClass('submit_success');
      }
      else
      {
        $('.submit').removeClass('submit_success');
      }
   });

   $(document).on('click', '.submit_success', function(e)
   {
      alert("The DIV is clicked");
   });

JS Fiddle: http://jsfiddle.net/snYrb/

person Kevin Bowersox    schedule 20.08.2013