标签:
<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>
标签:
原文地址:http://www.cnblogs.com/eternaluve/p/4705445.html