验证不适用于动态生成的元素[重复]答案

【问题标题】：validation not working on dynamically generated element [duplicate]验证不适用于动态生成的元素[重复]
【发布时间】：2018-03-17 08:52:54
【问题描述】：

我正在技能中做“添加更多”功能。

所以我有这样的形式，

<form id="myform">
    <a id="add_more">Add more</a>
    <div id="skills_wrap">
        <input type="text" name="skills[]"> 
    </div>
    <input type="submit" name="submit">
</form>

脚本就像，

<script>
$(document).on("click","#add_more",function(){
  $("#skills_wrap").append('<input type="text" name="skills[]">');
});

$("#myform").validate({
    rules:{
        "skills[]":{ required:true }
    }
});
</script>

在这里，验证仅适用于第一个文本框。添加更多技能文本框验证不起作用。

任何解决方案将不胜感激。

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

我找到了解决办法：

我为所有文本框添加了一个通用类，并更新了添加更多链接的点击事件中的代码，如下所示：

$(document).on("click","#add_more",function(){

    var i = $(".skill_name").length;

    $("#skills_wrap").append('<input type="text" name="skills['+i+']" class="skill_name" required>');

    $("input[name='skills["+i+"]']").rules("add", {
        required: true
    });

});

【讨论】：