Подтвердите адрес электронной почты нескольких входов, созданных скриптом jquery.

Question

Моя цель - проверить электронную почту во время ввода. Он работает с одним входом с первым скриптом, но я хотел бы иметь возможность использовать его с несколькими входами (.input_email_1, .input_email_2, .input_email_3 ...). Эти новые входы создаются со вторым скриптом. К сожалению, это не работает. Любой отзыв?

Сценарий 1

<script type="text/javascript"> 
    $(document).ready(function() { 
     var x_timer; 
     $(".input_email").keyup(function (e){ //key press 
      clearTimeout(x_timer); 
      var user_email = $(this).val(); 
      x_timer = setTimeout(function(){ 
       check_username(user_email); 
      }, 1000); 
     });     

     function check_username(username){ 
      $(".input_email_result").html('<i class="fa fa-spinner" aria-hidden="true"></i>'); 
      $.post('check_email.php', {'username':username}, function(data) { 
       $(".input_email_result").html(data); 
      }); 
     } 
    }); 
</script> 

Сценарий 2

<script type="text/javascript"> 
    $(document).ready(function($) { 
     var i=0; 
     $("#add").click(function (e) { 
      i += 1; 
      $("#items").append('<input type="email" class="form-control input_email_' + i + '" name="email[]">'); 
     }); 
     $("body").on("click", ".remove", function (e) { 
      $(this).parent("div").remove(); 
     });  
    }); 
</script> 

Answer 1

После добавления к HTML, добавить, что HTML функцию KeyUp, чтобы использовать его непосредственно. На надстройке функции:

$("#add").click(function (e) { 
    i += 1; 
    $("#items").append('<input type="email" class="form-control input_email_' + i + '" name="email[]">'); 

    $('.input_email_' + i).on("keyup",function() { 

     console.log(i +" item called"); 

     // call your check username function. 
     // you can also add here delay. 
    }); 

}); 

jsfiddle