jquery 未来元素事件示例 on() delegate() live()

jquery 1.7版后建议使用on()

$(document).on("click","#green",function(){$(this).after('<a target="_blank" href="http://www.cnblogs.com/afish">小鱼阁</a>');});
$(document).delegate("#green", "click", function(){$(this).after('<a target="_blank" href="http://www.cnblogs.com/afish">小鱼阁</a>');});
$("#green").live("click", function(){$(this).after('<a target="_blank" href="http://www.cnblogs.com/afish">小鱼阁</a>');});

下面是示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery 未来元素事件示例 on() delegate() live()</title>
<style>
#green{ border:3px solid #ddd; width:200px; height:100px}
.green{ border:3px solid #900; width:200px; height:100px}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
    $("#button").one("click", function(){
        $(this).after('<p id="green">我是点击按钮新增的元素，点击我也可以增加一个段落</p>');
    });
    $(document).on("click","#green",function(){
        var $this = $(this);
        if (!$this.data('isClick')){//判断是否点击过一次，限制只执行一次以下代码，与one功能类似
            $this.data('isClick', 1);
            $(this).after('<p class="green">我是点击未来元素新增的段落</p>');
        }
    
    });
});
</script>
</head>

<body>
<input name="button" id="button" type="button" value="增加一个段落" />
</body>
</html>

 

posted @ 2014-08-22 11:40  小鱼阁工作室  阅读(380)  评论(0)  编辑  收藏  举报
Copyright © 小鱼阁工作室 版权所有 -zencart外贸建站，织梦企业建站，ecshop商城，二次开发，产品采集，模板修改！