jquery - 验证不适用于动态添加的行

Question

我是 jquery 的新手。我为输入字段编写了验证。并在单击添加行时动态生成输入字段。我为所有输入字段提供了相同的 id 值。但是当我单击该按钮时，新生成的行未得到验证。

我哪里弄错了。提前致谢。

$(document).ready(function () {
    $("#mobile").keypress(function (e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            return false;
        }
    });
});


$(document).on('click', '#add_row', function () {

    var a = $("#name").val();
    var b = $("#country").val();
    var c = $("#mail_id").val();
    var d = $("#mobile").val();


    if (a == "") {
        $("#name").addClass("error");
    }
    else {
        $("#name").removeClass("error");
    }

    if (b == "") {
        $("#country").addClass("error");
    }
    else {
        $("#country").removeClass("error");
    }

    if (c == "" ) {
        $("#mail_id").addClass("error");
    }
    else {
        $("#mail_id").removeClass("error");
    }

    if (d == "") {
        $("#mobile").addClass("error");
    }
    else {
        $("#mobile").removeClass("error");
    }

    var i = 1;
    if (a == '' || b == '' || c == '' || d == '') {
        i = 1;
    }
    else {
        $('#addr' + i).html("<td><input name='checkbo" + i + "' type='checkbox' placeholder='' class='check'  /></td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md' id='name'/> </td><td><select name='country" + i + "' class='form-control' id='country'><option value=''>select an option</option><option value='afghan'>Afghanistan</option><option value='albania'>Albania</option></select></td><td><input  name='mail" + i + "' type='text' placeholder='Mail'  class='form-control input-md'  id='mail_id'></td><td><input  name='mobile" + i + "' type='text' placeholder='Mobile'  class='form-control input-md' id='mobile'></td>");

        $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
        i++;
    }

    $("#delete_row").click(function () {
        if (i > 1) {
            $("#addr" + (i - 1)).html('');
            i--;
        }
    });
});

.error{
    border: 1px solid red;
    transition: border-color .25s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <table class="table table-bordered table-hover" id="tab_logic">
                        <thead>
                            <tr >
                                <th>

                                </th>
                                <th class="text-center">
                                    #
                                </th>
                                <th class="text-center">
                                    Name
                                </th>
                                <th class="text-center">
                                    Address
                                </th>
                                <th class="text-center">
                                    Mobile
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id='addr0'>
                                <td>
                                    <input type="checkbox" class="check_0">
                                </td>
                                <td>
                                    <input type="text" name='name0'  placeholder='Name' class="form-control name" id="name" required>
                                </td>
                                <td>
                                    <select id="country" name="country" class="form-control"> 
                                        <option value="">select an option</option>
                                        <option value="Afghanistan">Afghanistan</option>
                                        <option value="Albania">Albania</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" name='mail0' class="form-control" id="mail_id" required>
                                </td>
                                <td>
                                    <input type="text" name='mobile0' placeholder='Mobile' class="form-control" id="mobile" required>
                                </td>
                            </tr>
                            <tr id='addr1'></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
        </div>

Answer 1

您不应该为输入分配相同的 id，id 必须是唯一的。

将相同的类名分配给您要验证的所有输入，例如:

$().ready(function() {
    $('#div1').hide();
    $('#btn1').click(function() {
        $('.class1').each(function() {
            $('#div1').hide();
            if ($(this).val() == "") {
                $('#div1').show();
                return false;
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div1">Error</div>
<input class="class1"/>
<input class="class1"/>
<input class="class1"/>
<button id="btn1">Click here</button>

这也适用于动态添加的输入。