一、在动态上传章节信息时，碰到了一系列的问题，主要有：
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相同表单下阻断提交。如图所示：
五、以上是关于该类问题的解决思路，更多内容欢迎关注博主的公众号，进行交流。
