Question

在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'>。

观察：

添加课程'submit_success'可以正确输入数值。
当用户输入字母或用字母编辑数值时，删除类可以正常工作。
当用户输入数字数据并点击<div>

当出现问题时，

步骤1：用户在文本框中输入一个数字。因此执行add class部分。

步骤2：现在用户删除他输入的号码并在文本框中写入字母。现在执行remove class部分并删除submit_success类。

但点击功能仍然有效。当用户点击屏幕上显示的<div>“点击DIV”时。但我想它不应该被执行。

如何解决这个问题？

Answer 1

切换到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小提琴： http://jsfiddle.net/snYrb/

removeClass（）删除了类，但jQuery记住了它

1 个答案: