在動態生成的元素上添加驗證規則使用jquery驗證插件

Question

我想在html文字創建的輸入添加一些驗證規則。

這是我的小提琴：http://jsfiddle.net/idoxobi/HW4xY/1/

HTML：

<form id='form' method='post' > 
    <div id='details'> 
    </div> 
    <a id='Add' href='javascript:void()'>Add</a> 
    <br /> 
    <input type='submit' /> 
</form> 

的JavaScript：

$(document).ready(function() { 
    $('#form').validate(); 
    var input = "<input type='text' class='item' name='item' />"; 
    $('#Add').click(function() { 
     $('#details').append(input+'<br />'); 
     $('#details input:last').rules('add', { 
      required: true 
     }); 
    }); 
}) 

這似乎承認規則只是在第一個元素，但其他人通過未經驗證。

是我第一次使用這個插件，但在論壇上大家都說這應該工作得很好。

有什麼建議嗎？

Answer 1

檢查：

HTML：

<form id='form' method='post' > 
    <div id='details'> 
    </div> 
    <a id='Add' href='#'>Add</a> 
    <br /> 
    <input type='submit' /> 
</form> 

JS：

$(document).ready(function() { 
    $('#form').validate(); 
    var i = 0; 
    $('#Add').click(function() { 

     var input = "<input type='text' class='item' name='item"+ i++ +"' />"; 
     $('#details').append(input+'<br />'); 
     $('#details input:last').rules('add', { 
      required: true 
     }); 

     return false; 
    }); 
}); 

on jsfiddle

Answer 2

其因輸入字段名稱是相同的每個，它已得到修復@ YD1m，我的方法如下：

$(document).ready(function() { 
    $('#form').validate(); 
    var counter = 0; 
    $('#Add').click(function() { 
     counter++; 
     $('#details').append("<input type='text' class='item required' name='item_" + counter + "' />" + '<br />'); 
    }); 
});