javascript - 添加具有相同类的新字段后对输入字段进行验证

Question

我有一个输入字段和“添加”按钮来存储。单击“添加”按钮时，应创建另一个具有相同类名的输入字段。但在创建之前需要进行验证检查。但验证只是第一次。第二次不进行验证检查。

下面是我的代码。

$('#add').click(function (e) {
                e.preventDefault();
                if ($('.js-user-email').val()) {
                    debugger;
                    $("#divSpecificToUserError span").text("");
                    $('#divSpecificToUserError').addClass("d-none");
                    if (ValidateEmailformat($('.js-user-email').val())) {
                        //debugger;
                        $.ajax({


                            type: "POST",
                            url: "Stepup.aspx/Exists",
                            data: JSON.stringify({ emailId: $('.js-user-email').val() }),
                            cache: false,
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            success: function (response) {
                                debugger;
                                if (response != null && response.d != null) {

                                    var data = response.d;
                                    if (data > 0) {
                                        addDynamicTextboxes();
                                    }
                                    else {
                                        $("#divSpecificToUserError span").text("not a valid user");
                                        $('#divSpecificToUserError').removeClass("d-none");
                                    }
                                }
                            },
                            failure: function (response) {
                                alert(response.d);
                            }
                        });
                    }
                    else {
                        $("#divSpecificToUserError span").text("Please enter email id in valid format");
                        $('#divSpecificToUserError').removeClass("d-none");
                    }
                }
                else {
                    $("#divSpecificToUserError span").text("No E-mail has been entered ");
                    $('#divSpecificToUserError').removeClass("d-none");
                }
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field form-group form-group-padding">
                      <label class="col-form-label">User E-mail(s) to Notify:</label>

                      <input type="text" id="field1" name="userEmail1" class="input form-control js-user-email" placeholder="example@domain.com" autofocus />
                      <button id="add" class="btn-sm btn-secondary add-more-specific pull-right btn-user-email" title="Add" type="button">+</button>

                      <div class="col-md-3 d-none alert-danger" id="divSpecificToUserError" style="margin-top: 6px">
                                    <span></span>

                      </div>
        </div>

Answer 1

$('.btn-user-email') 如果这是多个元素，您需要循环它并向 jQuery 列表中的所有元素添加单击事件。