如何正确在动态添加的内容里再动态添加内容并绑定动作

dudasunny 2018-08-24 02:29:52

希望达到的目标
1. 点击添加table可以动态增加table
2. 点击每个table里面的添加tr可以正确的在相应的table里面增加tr
3. 表格中的input需要绑定各自单独的onblur事件。

如果在append增加table的时候，改变“增加tr”按钮的class值，比如"class='addtr1'", 那后续绑定对应的class值，可以正确的添加tr到正确的表格。比如这个帖子里的方法：https://bbs.csdn.net/topics/392428094
但是存在一个问题：这样会造成所有table的class值不一样，那就没办法来通过class来统一设置样式。
同样，form里面的input也一样，需要改变class值才能正确的通过on来绑定blur，那就无法统一设置样式了。
有什么办法可以正确的添加，同时又不影响统一设置样式呢呢？
为什么on需要通过class来绑定呢。

望专家们指点，多谢



<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<script language="javascript" type="text/javascript" src="../js/jquery-3.3.1.js"></script>

<script type="text/javascript">

$(document).ready(function(){ 

$("#form-content").on("click",".addtable",function(){

	var html = "<table id='detail' border='1'  style='margin-bottom:10px'>";

	html += "<tr><td><input type='button' name='addtr' class='addtr' value='增加tr'></td>";

	html += "<td>内容</td></tr>";

	html += "</table>";

	$("#form-content").append(html);

	$("#detail").on("click",".addtr",function(){

	var html = "<tr>";

	html += "<td><button type='button' clase='deltr'>删除此项</button></td>";

	html += "<td><input type='text' name='data' id='data' class='data'></td>";

	html += "</tr>";

	$("#detail").append(html);

})

})



$("#detail").on("click",".addtr",function(){

	var html = "<tr>";

	html += "<td><button type='button' clase='deltr'>删除此项</button></td>";

	html += "<td><input type='text' name='data' id='data' class='data'></td>";

	html += "</tr>";

	$("#detail").append(html);

})



$("#detail").on("blur",".data",function(){

	alert("haha");

})



})

</script>

</head>

<body> 

<div class="main-content">

	<form action="xx.php" method="post" name="mainform">

		<div id="form-content">

			<input type="button" name="addtable" class="addtable" value="增加table">

			<table id="detail" border="1" style="margin-bottom:10px">

				<tr><td><input type="button" name="addtr" class="addtr" value="增加tr"></td><td>内容</td></tr>

			</table>

		</div>

		<div><input type="submit" name="sub" value="保存" /></div>

	</form>

</div>

</body>

</html>