|
转:http://blog.csdn.net/a15937822658/article/details/13091159 |
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
<style>
.add
{
float: left;
height: 50px;
width: 50px;
margin-left:5px;
}
</style>
<script type="text/javascript">
//页面载入时执行，绑定.add类的click事件
$(document).ready(function () {
$("body").on("click", ".add", function () {
alert("body on click");
});
});
var backclolor = "yellow";
//点击button，绑定.add类的click事件，注意与上面绑定方式的不同。
function bind() {
$(".add").on("click", function () {
alert("add clicked");
});
backclolor = "gray";
}
//添加新的元素到newZone
function addNewDiv() {
$("<div class='add' style='background:" + backclolor + ";'>added Div</div>").appendTo($("#newZone"));
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="addNewSpan" onclick="addNewDiv();" />
<input type="button" value="bindAdded" onclick="bind();" />
<div id="newZone">
</div>
</div>
</form>
</body>
</html>
说明：
先点击 AddNewSpan 此时新添加的div点击事件都可以被 $("body").on("click", ".add", function () {}) 所捕捉到，点击黄色div会有弹窗body on click。
然后点击 bindAdded用于绑定.add类的div，再点击几次addNewSpan，新增灰色的div。此时点击黄色的div，会有2个提示框，显示add clicked 然后是body on click，而点击新增的灰色的div，只有1个body on click的提示框。
这里$("body").on("click", ".add", function () {}) 和 $(".add").on("click", function () {}) 的区别就体现出来了，第一个$('body')绑定的是整个body，所有动态新增的div点击一律有效，而后来经过一次$('.add')绑定，绑定了前面的黄色div，所以点击前面黄色的div就有两次提示，而之后又新增的灰色div没有被$('.add')的绑定绑定到，所以只能被$('body')捕捉到，而不能被$('.add')的绑定捕捉到，点击也只有body on click的提示。
两个div的弹出顺序跟javascript的事件冒泡机制有关，有空还是要多深入了解下javascript和Jquery，一知半解只会用还是不行。
