使用 jquery 事件委托的 on 方法

不踩过坑是学不到知识的，哈哈~

我没有系统的学过 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 是将要绑定事件的元素的父元素。

就是这样。