0

在 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”。但我想它不应该被执行。

如何解决这个问题呢？

4

1 回答 1

2

切换到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/

于 2013-08-20T08:43:07.963 回答