下面,通过一个简单的例子进行阐述,以供大家参考,并对各个方法进行比较:
页面元素: 经测试代码如下:
<!-- 来自 编程之家 jb51.cc (jb51.cc)-->
<div id="main">
<a href="#">aaaaaaaaaaaaaaaaaaaaaa</a><br />
<a href="#">bbbbbbbbbbbbbbbbbbbb</a><br />
<a href="#">ccccccccccccccccccccccccc</a><br />
<a href="#">dddddddddddddddddddd</a><br />
<a href="#">eeeeeeeeeeeeeeeeeeeeee</a><br />
<a href="#">fffffffffffffffffffffffffffffffff</a><br />
<a href="#">gggggggggggggggggggg</a><br />
<a href="#">hhhhhhhhhhhhhhhhhhhh</a>
</div>
<input type="button" value="创建a标签" id="btnCreate" />
<!-- 来自 编程之家 jb51.cc (jb51.cc)-->
页面中的js:
/**
* 前绑定、后绑定
*
* @param
* @arrange (512.笔记) jb51.cc
**/
<script src="/js/Scripts/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//后绑定,即动态创建的元素不能拥有绑定的事件!!!
//1.后绑定
// $("#main > a ").click(function () {
// alert($(this).html());
// });
//2.后绑定
// $("#main > a").bind("click",function () {
// alert($(this).text());
// });
//3.后绑定,// $("#main > a").bind({
// click: function () { alert($(this).text()); },// mouSEOver: function () { $(this).css("background-color","red") },// mouSEOut: function () { $(this).css("background-color","white") }
// });
$("#btnCreate").bind({
click: function () { $("<br /><a href='#'>我是动态创建的</a>").appendTo("#main"); }
});
//4.前绑定,动态创建的元素也拥有了点击的事件
// $("#main").delegate("a","click",function () {
// alert($(this).text());
// });
//5.前绑定,live的事件源头的是documentdelegate的源头是具体要绑定的元素,所以delegate的效率比live高多了
$("#main a").live("click",function () {
alert($(this).text());
});
});
</script>