码迷,mamicode.com
首页 > Web开发 > 详细

jquery动态生成元素的事件绑定

时间:2015-08-05 20:17:31      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:



<html>

<head>
<meta charset="utf-8">
<meta name="view" content="width=device-width;user-scalable=no;initial-scale=1.0">
<script src="jquery.js"></script>
<style>

.image-host{

width:100%;


}

.image-host.image-block{

width:100%;
height:100px;
margin:10px 0;
padding-left:10px;
}

.image-block img{

width:100px;
height:100px;

}
</style>
</head>

<body>

<script>


$(document).ready(function(){

var img_block = $(‘div.image-host‘).html();

$("#moreimg").click(function(){

$(‘div.image-host‘).append(img_block);
});


/* $(‘img‘).live("click",function(){

alert("a");
});


live方法已经失效
*/

//live方法在新的jquery版本里已经失效
//下面给img绑定click事件,分别使用click(会发现对新增加的动态图片,无法响应点击事件),使用delegate方法,则可以
//delegegate使用方法 $(‘父元素选择器,可以是多层父元素,可以是id,class,tagname等等‘).delegate("子元素的选择器","绑定的事件名,这里为click","待处理的函数fun//cCall");

//下面测试时,注释掉其中一个click
$(‘.image-host‘).delegate("img","click",function(){

alert("a");
});

$(‘img‘).click(function(){

alert("a");
})





});
</script>

<div class="image-host">
<div class="image-block"><img src="http://ww3.sinaimg.cn/mw600/672ac5f1jw1dyvqs9ya0zj.jpg"></div>

</div>
<div class="more_image">
<input type="button" id="moreimg" value="增加图片">
</div>
</body>
</html>

jquery动态生成元素的事件绑定

标签:

原文地址:http://www.cnblogs.com/eternaluve/p/4705445.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!