不踩过坑是学不到知识的,哈哈~
我没有系统的学过 jquery,只是会用一些基本的选择器、简单的事件响应以及一些 ajax 调用的方式,在最近写的一个程序中,就吃到了苦头......
问题是这样的,在我的 html 页面上有这样的一句代码:
<td><i><a href="BlogAction_deleteBlog?bid=<s:property value='#mb.id'/>">删除</a></i></td>
只是一句普通的 html 代码,我使用 jquery 为这个超链接加上了点击事件,希望使用 ajax 的方式提交这个请求到后台处理,jquery 代码是这样的:
$("i > a").click(function(){
var $a = $(this).html();
//alert($a);
if($a == "删除"){
//1.点击 delete 时,弹出警告信息
var flag = confirm("确定要删除吗?");
if(flag){
//使用 ajax 的方式删除
var url = this.href;
var args = {"time":new Date()};
//将 <td></td>节点所在行从页面删除
var $td = $(this).parent().parent().parent();
$.post(url,args,function(data){
//若 data 的返回值为 1 ,则提示删除成功,并将当前行删除
if(data == 1){
alert("删除成功!");
$td.remove();
} else{
//若 data 的返回值不为 1 ,则删除失败
alert("删除失败!");
}
});
}
//取消超链接的默认行为
return false;
}
});
后台通过流的方式返回 0 或 1 来表示删除成功或失败,目前这个代码可以正常并且完美的工作,ajax 部分刷新的形式使我很开心。
但是后来我改变了需求,需要使用 jquery 动态生成上面的那句 html 代码,就是这句:
<td><i><a href="BlogAction_deleteBlog?bid=<s:property value='#mb.id'/>">删除</a></i></td>
就是说这句代码是我使用 jquery 动态拼出来的,jquery 代码是这样的:
var $td = $("<td></td>");
var $i = $("<i></i>");
var $delete = $("<a href='#'></a>");
$delete.attr('href','BlogAction_deleteBlog?bid='+element.blogId);
$delete.append("删除博客");
$i.append($delete);
$td.append($i);
可是这时候点击链接进行删除时,那段 ajax 代码却不执行了,我使用 chrom 的开发者工具查看页面源代码,跟之前的页面格式是完全一样的,真是百思不得其解,折腾了好久,后来经过别人指点,才知道动态生成的 DOM 需要使用到 js 的事件委托,于是去查找了资料,使用了 jquery 的 on 方法绑定了事件,终于将问题顺利解决。
当我们使用 jquery 为 dom 元素绑定各种事件时,这些绑定事件通常在页面刚加载完成的时候绑定完成,而后绑定方法就不会再调用,所以后来通过代码动态生成的 DOM 元素就无法绑定这些事件,因此上面的 ajax 代码就不会执行了。但使用 jquery 事件委托绑定的事件,不仅为页面上已有的 dom 元素绑定了事件,而且为目前尚不存在的符合格式的 dom 元素绑定了事件。事件委托利用的 js 的事件冒泡的原理。它的语法为:
.on( events [, selector] [, data] , handler(eventObject) )
这段事件委托代码如下:
//使用 on 方法为元素进行事件委托(i > a 是由js代码动态生成的元素)
$("#blogTab").on("click","i > a",function(){
var $a = $(this).html();
if($a == "删除博客"){
//1.点击 delete 时,弹出警告信息
var flag = confirm("确定要删除这篇博客吗?");
if(flag){
//使用 ajax 的方式删除
var url = this.href;
var args = {"time":new Date()};
//将 <td></td>节点所在行从页面删除
var $td = $(this).parent().parent().parent();
$.post(url,args,function(data){
//若 data 的返回值为 1,则提示删除成功,并将当前行删除
if(data == 1){
alert("删除成功!");
$td.remove();
} else{
//若 data 的返回值不为1,则删除失败
alert("删除失败!");
}
});
}
//取消超链接的默认行为
return false;
}
});
代码基本没变,就是使用了 on 方法来绑定事件,其中 blogTab 是将要绑定事件的元素的父元素。
就是这样。