jQuery中给动态添加的代码绑定添加事件

时间：2014-06-05 编辑：简简单单来源：一聚教程网

在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("

删除成功" + data.returnID + "

");
                        });
                }
            });

使用live便可轻松做到,如：

";
return myTR;
}

$("#RequestParameters").append(CreateRequestTR(data));

代码如下	复制代码
function CreateTR(data) { var myTR = "
" + data.name + "	" + data.description + "	删除

这样添加进去的元素也会被绑定上事件处理函数

有不少同行因为这个原因而使jQuery停留在了1.7.X这个版本之前，其实我们如果需要达到和.live()相同的效果，我们可以使用下面这个方法

代码如下	复制代码
$(document).on("各种事件（如click、mousemove...）","事件对象（比如我点击class为.close的div，那么这里就是.close）",function(){ //事件处理中心 })

这样我们依然可以对程序动态添加的代码进行js事件绑定

示例：

代码如下

复制代码

//点击删除该对象
$(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版本整合了之前的三种方式的新事件绑定机制

上一个： wordpress后台无法登陆登录成功自动跳转登录页面
下一个： jQuery中.bind() .live() .delegate() .on()的差别

推荐专题

最新下载

热门教程

jQuery中给动态添加的代码绑定添加事件

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程