一、在动态上传章节信息时，碰到了一系列的问题，主要有：
1、动态添加的input元素绑定的事件失效了。
2、提交保存时，多个name相同的表单如何判空并阻断提交。
二、问题界面展示：
（1）在这个页面中，第一个form表单，是开始就有了，第二个是点击按钮后动态添加的，它的判断是否为空是无效的。
三、问题出现的原因：
1、为了完成业务，我最初在html中我写了一个form表单，和一个增加按钮。
<button class="btn btn-primary btn-block" onclick="addchapter()">增加章节</button> <form action="/savechaptername" method="post" id="myform"> <p></p><p></p> <input type="hidden" name="courseid" th:value="${course.getCourseid()}"> <div class="box"> <div class="box-header with-border"> <h3 class="box-title">请输入每章章节标题(从上往下依次是第1章->第n章)</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove" > <i class="fa fa-times"></i></button> </div> </div> <div class="box-body"> <div class="form-group"> <label class="col-sm-2 control-label">章节名：</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="请输入章节名" name="chaptername" ><span></span> </div> </div> </div> </div> <!-- /.box --> <button type="submit" class="btn btn-primary btn-block" th:id="myform1" onclick="save()">提交保存</button> </form>
（2）每点击一次按钮会增加一个章节输入框，这种动态添加可以通过使用js的append（）方法实现，在idea中，我直接复制上面的html代码，粘贴进入append方法中，他会自己转义，特别方便。代码如下：
function addchapter() { $("#myform1").before("<div class=\"box\">\n" + " <div class=\"box-header with-border\">\n" + " <h3 class=\"box-title\">请输入每章章节标题(从上往下依次是第1章->第n章)</h3>\n" + "\n" + " <div class=\"box-tools pull-right\">\n" + " <button type=\"button\" class=\"btn btn-box-tool\" data-widget=\"remove\"\n" + " data-toggle=\"tooltip\" title=\"Remove\" onclick=\"remove(this)\">\n" + " <i class=\"fa fa-times\"></i></button>\n" + " </div>\n" + " </div>\n" + " <div class=\"box-body\">\n" + " <div class=\"form-group\">\n" + " <label class=\"col-sm-2 control-label\">章节名：</label>\n" + "\n" + " <div class=\"col-sm-10\">\n" + " <input type=\"text\" class=\"form-control\" name=\"chaptername\" placeholder=\"请输入章节名\"\n" + " >\n" + " <span></span></div>\n" + " </div>\n" + " </div>\n" + " </div>"); }
（3）每个输入框都带有判断不为空的事件。开始写的时候这样写，结果就出现了刚才所遇到的问题。新增的input表单事件无效。
$("[name=chaptername]").blur(function () { if ($(this).val() != "") { $(this).next().text(""); } else { $(this).next().text("不能为空").css("color", "red"); } });
四、解决方案
1、之所以会出现刚才的问题，是因为在事件加载之后我们才动态添加元素，新的元素并没有绑定到曾经的事件。解决方案：
（1）绑定事件需要等元素添加完毕，再绑定，才会生效。用on方法可以实现，代码如下：
$(document).on("blur","[name=chaptername]",function () { if ($(this).val() != "") { $(this).next().text(""); } else { $(this).next().text("不能为空").css("color", "red"); } });
（2）扩展：要是我们用的框架的js，比如添加的表单，不需要可以点击×号删除，要想实现效果，但不知道怎么做的时候，我们可以自己写点击事件，不用框架的，因为我们无法把握人家的js，这只是本人的一种思路，会的不用理会。在此处，我需要实现可以把动态添加的表单删除，我在添加时都加了remove（）方法，每次点击，它会自己调用完成操作。
function remove(a) { $(a).parents(".box").fadeTo("slow", 0.01, function(){ $(this).slideUp("slow", function() { $(this).remove(); }); }); }
2、至于如何在保存前判断name相同的表单都不为空
（1）我给提交按钮添加了点击事件save（）。
（2）在form的action右边添加了id为myform。
（3）定义一个初始值i，记录为空的个数。
（4）使用each函数循环遍历name相同的表单，遍历时，判断是否符合，有不符合的i值加1。
（5）遍历完成后，判断i值，大于0说明不符合，阻断提交。
3、具体实现如下，可以参考一下。
//保存相同name的值阻断提交 function save() { var i=0; $("input[name='chaptername']").each(function(){ if($(this).val()==""){ i=i+1; } }); if (i>0) { $("#myform").bind("submit", (function (e) { e.preventDefault(); })); confirm("输入的信息有误，请重新检查"); } else { var r=confirm("确认保存？"); if(r==true){ $("#myform").unbind("submit"); } } }
4、最终我们达到了需要的效果，新增的表单事件有了，也可以在多name相同表单下阻断提交。如图所示：
五、以上是关于该类问题的解决思路
