本文详解jQuery中的前绑定与后绑定概念。通过示例对比直接绑定（后绑定）与delegate、live方法（前绑定）在处理动态创建元素时的差异。指出直接绑定无法作用于后续生成的元素，而前绑定通过事件委托机制，使动态元素也能触发事件，并比较了delegate与live的效率差异。
前绑定与后绑定的概念区别
前绑定与后绑定的核心区别在于事件绑定的时机。前绑定指的是在DOM元素尚未创建时，就预先指定该类型元素应具备的事件行为；后绑定则是指在元素生成之后再进行事件关联。在实际开发中，这两种模式经常交替使用。前绑定即“未出生先绑定”，后绑定即“出生后绑定”。以下通过具体案例进行说明，并对各方法进行比较：
HTML页面结构如下：
<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" />jQuery动态元素事件处理实现
对应的JavaScript代码实现如下：
JavaScript代码：
<script src="201102/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方法的事件源头为document，而delegate的源头为指定元素，因此delegate性能优于live
$("#main a").live("click", function () {
alert($(this).text());
});
});
</script>