javascript - 对表体进行 ajax 更新后，Javascript 验证不起作用

Question

我有以下代码。我所做的是，当我按下组合框的更改时，我调用以下内容Ajax。这段代码的作用是ajax function调用PHP用新内容重新填充表格主体。唯一的问题是在那Javascript validation之后不起作用。

$("#vID").change(function() { 
                
    if(this.value >0){
        var selectedVID = this.value;
        var selectedNumber = $('#vID option:selected').text();
        Swal.fire({
                title: '<strong>Loading  .....</strong>',
                type: 'info',
                html: '',
                //timer: 2000,
                onBeforeOpen: () => {
                    Swal.showLoading()
                    
                },    
        });
        $.ajax({
            type: "POST",                
            url: 'reminder.php',
            data: {vID:selectedVID},
            dataType: 'html',
            timeout: 600000,
            success: function (data) {
                $('#vReminderSettings tbody').html("");
                $('#vReminderSettings tbody').append(data);
                
                let timerInterval;
                Swal.fire({
                        title: 'Successfully Loaded',
                        type: 'success',
                        showConfirmButton: false,
                        timer: 300,
                        onBeforeOpen: () => {
                            

                            timerInterval = setInterval(() => {
                                
                            }, 100)
                        },
                        onClose: () => {
                            clearInterval(timerInterval)
                        }
                });
            },
            error: function (e) {
                Swal.fire({
                    title: 'Error:'+e.responseText,
                    type: 'warning',
                    showConfirmButton: false,
                    timer: 2000,
                    onBeforeOpen: () => {
                        

                        timerInterval = setInterval(() => {
                            
                        }, 100)
                    },
                    onClose: () => {
                        clearInterval(timerInterval)
                    }
                });
            }
        });
        
    }
});

如您所见，我清除了表体

$('#vReminderSettings tbody').html("");
and then appen new contents $('#vReminderSettings tbody').append(data);

. 所有这些工作都很好。

这是我在桌子上的代码。

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">List</h4>
                <h6 class="card-subtitle"></h6>
                <div class="table-responsive m-t-40">
                    <table id="vReminderSettings" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th class="datatable-nosort">No.</th>                                               
                                    <th>Distance(km)</th>                                                                                       
                            </tr>
                        </thead>
                        <tbody id="vReminderSettingsBody">
                            <tr>
                            <td><div class="form-group row">
                            <label class="control-label text-right col-md-3">
                            <span class="text-danger">*</span></label>
                            <div class="col-md-6">
                            <input type="text" name="distance1" class="form-control" min="1000" max="80000" required="" data-validation-containsnumber-regex="(\d)+" data-validation-containsnumber-message="No Characters Allowed, Only Numbers" aria-invalid="false">
                            <small class="help-block"></small></div>
                            </div>
                            <input type="hidden" name="existOptionReminder1" id="existOptionReminder1" value="checked">
                            </td>
                            </tr>
                        </tbody>
                    </table>
                    <button type="submit" class="btn btn-info" name="Update" value="Update">Update</button>
                </div>
            </div>   
        </div>
    </div>
</div>

我故意默认保留了这一表行。

<tr>
    <td>
        <div class="form-group row">
            <label class="control-label text-right col-md-3">
                <span class="text-danger">*</span>
            </label>
            <div class="col-md-6">
                <input type="text" name="distance1" class="form-control" min="1000" max="80000" required="" data-validation-containsnumber-regex="(\d)+" data-validation-containsnumber-message="No Characters Allowed, Only Numbers" aria-invalid="false">
                <small class="help-block"></small>
            </div>
        </div>
        <input type="hidden" name="existOptionReminder1" id="existOptionReminder1" value="checked">
    </td>
</tr>

这个工作得很好。但是，当我调用Ajax来填充相同的东西之后，数据验证不起作用。之后如何重新绑定或制作Javascript作品Ajax？

标签： javascriptjqueryajaxvalidation