一个简单的动态绑定事件的例子

   很多网站上都可以看到动态添加元素的例子，如在一些招聘网站上在填写简历时的“添加项目”动作。今天来动手做一个动态添加元素的例子。

   例子比较简单，没有后台，模拟有后台时向后台添加学生id和name。页面的初始样式如下： 

               

           给添加按钮绑定点击事件，点击后浏览器提示“添加成功”。这样可以在表格中某一行的学生id和name填写好之后点击添加按钮，浏览器提示“添加成功”，模拟向后台接口添加数据的效果，点击后效果如下图：

     

    该行添加之后，可以通过点击表头的增加一行按钮来动态添加一行，使用JQ中的append()函数追加html代码来实现动态添加一行，注意新追加的行中的添加按钮的class和初始行中的添加按钮class设置相同，点击效果如下：

    

   

   动态添加了一行以后，发现点击新增加的这行的添加按钮并没有实现出预期的添加效果，并未出现提示框，这说明新添加的这行的addSuccess按钮并没有实现我们在script中给addSuccess按钮设置的点击效果。这时需要给新添加的元素实现动态绑定。通过on()函数来实现，注意要给addSuccess这个按钮的父元素table添加on()函数以实现事件委托。代码如下：

   

 <div class="container">
	  <form role="form">
		  <table class="table-striped table-bordered">
			  <thead>
			  <tr>
				  <th>id</th>
				  <th>name</th>
				  <th><input class="btn btn-primary add" type="button" value="增加一行" ></th>
			  </tr>
			  </thead>
			  <tr >
				  <td class="table tr td" ><input type="text" /></td>
				  <td class="table tr td"><input type="text" /></td>
				  <td ><input class="btn btn-primary addSuccess" type="button" value="添加"></td>
			  </tr>
		  </table>
	  </form>
  </div>
<script>
$(document).ready(function() {
	$("table").on("click",".addSuccess",function () {
		alert("添加成功！");
	})
	$("table thead").click( function (e) {
		if (e.target.className == 'btn btn-primary add') {
			$("table").append("<tr><td class='table tr td'><input type='text'  name='ID' value=''/></td><td class='table tr td'><input type='text' value=''/></td><td ><input class='btn btn-primary addSuccess' type='button' value='添加'></td></tr>");
		}
	})
})
</script>

   这样一个动态添加元素的效果就实现了~