скрыть DIV при вводе текста в поле ввода начинается - JQuery

Question

У меня есть форма, которая выглядит как этот

 <form id="form-send"> 
      <table class="form-table"> 
       <tbody> 
        <tr> 
         <td width="30%">First Name <span class="required">*</span></td> 
         <td width="70%"> 
          <input type="text" id="first-name" value="" /> 
          <div id="first-name-error-msg" class="error-box"></div> 
         </td> 
        </tr> 
        <tr> 
         <td>Last Name<span class="required">*</span></td> 
         <td> 
          <input type="text" id="last-name" value="" /> 
          <div id="last-name-error-msg" class="error-box"></div> 
         </td> 
        </tr> 
        <tr> 
         <td>Address</td> 
         <td><input type="text" value="" /></td> 
        </tr> 
        <tr> 
         <td><button type="submit">Send</button></td> 
         <td><button type="reset">Reset</button></td> 
        </tr> 
       </tbody> 
      </table> 
     </form> 

Сценарий я использую для проверки формы входа выглядит как этот

 $(document).ready(function($) { 
      $('#form-send').submit(function(){ 
       var error = 0; 
       var name = $('#first-name').val(); 
       if (name == '') { 
        error = 1; 
        $('#first-name').addClass('error'); 
        $('#first-name-error-msg').html(" - First name is required"); 
        $('#first-name-error-msg').parent().show(); 
       } 
       var name = $('#last-name').val(); 
       if (name == '') { 
        error = 1; 
        $('#last-name').addClass('error'); 
        $('#last-name-error-msg').html(" - Last name is required"); 
        $('#last-name-error-msg').parent().show(); 
       } 
    if (error) { 
     return false; 
    } else { 
     return alert("Email sent"); 
    } 
      }); 
     }); 

Если я нажмите кнопку отправки, не заполняя поля, на которых отображаются сообщения об ошибках. Я пытаюсь сделать следующее: после отображения сообщений об ошибках, когда пользователь снова начнет вводить имя в поле ввода, сообщение об ошибке, содержащее сообщение, должно исчезнуть. Я пытался что-то вроде этого

$('.error').keyup(function() { 
    $('.error-box').hide('slow'); 
}); 

, но он не будет работать, кто-то может дать мне некоторые намеки на то, что я делаю неправильно или что другой метод, который я должен использовать?

Answer 1

Использование on() для dynamically attached classes как

$(document).on('keyup','.error',function() { 
    $(this).next('.error-box').hide('slow'); 
}); 

Working Demo

Также вы можете упростить ваш code используя класс как,

$('#form-send').submit(function() { 
    var error = 0; 
    var status=true; 
    $('input.required-input').each(function(){ 
     $this=$(this); 
     if(!$.trim($this.val())) 
     { 
      $this.addClass('error'); 
      $this.next('.error-box').html($this.attr('title')).show(); 
      status=false; 
     } 
     else 
     { 
      $this.removeClass('error'); 
      $this.next('.error-box').html('').hide(); 
     } 
    }) 
    return status; 
}); 

Updated Demo