在jquery推出新版本，使用.on()以前，我们会用.live()来为动态添加的代码绑定事件，但是现在jQuery用.on()替代了.live()
先看个.live()实例
| 代码如下 | 复制代码 |
|
$(".RemoveLink").live("click",function () { // Get the id from the link var recordToDelete = $(this).attr("data-id"); alert("即将删除" + recordToDelete); if (recordToDelete != '') { // Perform the ajax post $.post("/BS_Parameter/Delete", { "id": recordToDelete }, function (data) { $("#tb_row_" + data.returnID).fadeOut("slow"); $("#AddedParamet").append("<p>删除成功" + data.returnID + "</p>"); }); } }); |
|
使用live便可轻松做到,如：
| 代码如下 | 复制代码 |
|
function CreateTR(data) { var myTR = "<tr id='tb_row_"+data.returnID+"'><td>" + data.name + "</td><td>" + data.description + "</td><td><a href='#' class='RemoveLink' data-id='" + data.returnID + "'>删除</a></td>"; return myTR; } $("#RequestParameters").append(CreateRequestTR(data)); |
|
这样添加进去的元素也会被绑定上事件处理函数
有不少同行因为这个原因而使jQuery停留在了1.7.X这个版本之前，其实我们如果需要达到和.live()相同的效果，我们可以使用下面这个方法
| 代码如下 | 复制代码 |
|
$(document).on("各种事件（如click、mousemove...）","事件对象（比如我点击class为.close的div，那么这里就是.close）",function(){ //事件处理中心 }) |
|
这样我们依然可以对程序动态添加的代码进行js事件绑定
示例：
| 代码如下 | 复制代码 |
|
<!-- 比如下面这段代码是通过js添加，而不是默认就有的 --> <div class="del_this"></div> //点击删除该对象 $(document).on("click",".del_this",function(){ $(this).remove(); }) |
|
总结，使用on()之后发现非常的方便好了哦，并且代码也简单了一些。
live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的
$("a").live("click",function(){alert("ok");});
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
差别：
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制
时间： 2024-09-08 19:38:26