jquery - Jquery 验证在动态添加的行上失败

Question

我正在使用jquery validation plugin它，它不适用于动态添加的行，我code是：

html:

<form action="test.php" onsubmit="return false;">
    <div id="add_rows"> 
        <div class="new-row">
            <input type="text" required="required" name="qty[]" /><br />
            <textarea required="required" name="test[]" rows='4' cols='15'></textarea>
        </div>
    </div>
    <button>Add</button>
</form>

脚本：

var frm=$('form').validate({
    submitHandler: function(form) {
        // do other stuff for a valid form
        alert('form submitted');
        return false;
    }
});

$('button').on('click',function(){
    $clone=$('.new-row:first').clone();
    $clone.find('input,textarea').val('');      
    $clone.insertAfter($('.new-row:last'));
    $clone.find('input,textarea').rules('add',{required:true});
    $('.new-row:last').find('input,textarea').rules('add',{required:true});
});

小提琴

另一个问题，我已经在我的系统上尝试过了，我得到了这样的错误：如果我删除TypeError: e is null 了那行$clone.find('input,textarea').rules('add',{required:true});，那么错误就不会出现，但是这个错误在fiddle

Answer 1

试试这个，我想这就是你想要的

为文本区域和输入添加了唯一名称。

var incr = 0;
$('button').on('click',function(){
    incr++;
    $clone=$('.new-row:first').clone();
    $clone.find('input,textarea').val('');
    $clone.find('input').attr('name','qty'+incr+'[]');
    $clone.find('textarea').attr('name','test'+incr+'[]');

演示在这里