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 に答える