<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JQuery/jquery-1.11.0.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#addPassenger").click(function() {
var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
var input1 = document.createElement("input");
input1.type = "text";
input1.id = "in1";
$(td1).append(input1);
var td2 = document.createElement("td");
var btn = document.createElement("input");
btn.type = "button";
btn.name = "dongtai";
$(btn).val("delete");
$(td2).append(btn);
$(tr1).append(td1);
$(tr1).append(td2);
$("#tbody").append(tr1);
});
$("#jingtai").click(function() {
$("#jingtai").parent().parent().remove();
});
$("td").delegate("input", "click", function() {
alert("dong");
$(this).parent().parent().remove();
});
$("div").delegate("p", "click", function() {
alert("P_dong");
$(this).slideToggle();
});
$("button").click(function() {
$("<p>这是一个新段落。</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<input type="button" name="" id="addPassenger" value="添加" />
<!--<button id="add" type="button">添加btn</button>-->
<br>
<table id="tbody" border="" cellspacing="" cellpadding="">
<tr>
<th>姓名</th>
<th>删除</th>
</tr>
<tr>
<td>静态添加1</td>
<td>
<input id="jingtai" type="button" value="静态添加1" />
</td>
</tr>
<tr>
<td>静态添加2</td>
<td>
<input id="jingtai" type="button" value="静态添加2" />
</td>
</tr>
</table>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
<button>按钮后面插 p 元素</button>
<p>这是后面一个段落。</p>
<p>这是后面一个段落。</p>
</div>
<p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>
</div>
</body>
</html>
本文出自 “10917283” 博客，请务必保留此出处http://10927283.blog.51cto.com/10917283/1899584
原文：http://10927283.blog.51cto.com/10917283/1899584