如何使用Jquery给动态生成的控件绑定事件-老鄢博客

如何使用Jquery给动态生成的控件绑定事件

发布时间：2016-07-07 11:27:38 作者：admin 阅读：1056次

转:http://blog.csdn.net/a15937822658/article/details/13091159

<style>

.add

{

float: left;

height: 50px;

width: 50px;

margin-left:5px;

}

</style>

//页面载入时执行，绑定.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>

</head>

<body>

<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，一知半解只会用还是不行。

如有问题，可以QQ搜索群1028468525加入群聊，欢迎一起研究技术

支付宝