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

验证由jquery脚本创建的多个输入的电子邮件地址

1 个答案: