15、jQuery事件处理之事件动态绑定使用示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
html,body{
text-align: center;
font-size: 20px;
}
div{
margin: 0 auto;
border: 1px solid black;
}
#cn{
float: left;
margin: 50px;
width: 420px;
height: 340px;
line-height: 40px;
}
#bj{
width: 340px;
height: 260px;
}
#hd{
width: 260px;
height: 180px;
}
#ppc{
width: 180px;
height: 95px;
}
#usa{
float: left;
margin: 50px;
width: 420px;
height: 340px;
}
span{
display: block;
}
</style>
<script>
$(document).ready(function(){
/*
// 生成一个span，但没有事件
$('#ppc span').click(function(){
$(this).after('<span>Sian</span>');
});
// 使用克隆将事件一起复制过来
$("#ppc span").click(function(){
var obj = $(this).clone(true).text('Sian');
$(this).after(obj);
})
// 使用live()方法将事件一起绑定到新元素，实际上是把事件委派给Document
$('#ppc span').live('click', function(){
$(this).after('<span>Sian</span');
});
// on替代了live方法
$(document).on('click', '#ppc span', function(){
$(this).after('<span>sian</span>');
});
// delegate()可做为live()的替代方案，实际上是通过父元素对后代元素事件绑定
// 使用delegate()首先需要选择父元素
$('#ppc').delegate('span', 'click', function(){
$(this).after('<span>sian</span>');
});
// on替代了delegate方法
$('#ppc').on('click', 'span', function(){
$(this).after('<span>sian</span>');
});
// 在jQuery1.7以后不建议使用以上事件委派方法，统一使用on() off()
*/
});
</script>
</head>
<body>
<div id="cn">
<span>中国</span>
<div id="bj">
<span>北京</span>
<div id="hd">
<span>海淀</span>
<div id="ppc"><span>www.ppc.com</span></div>
</div>
</div>
</div>
<div id="usa">
<span>美国</span>
</div>
</body>
</html>
页:
[1]