ajax动态添加的按钮正确绑定事件以及获取触发此事件的按钮

原本代码：

// 分页函数
function getPageOfMemo(page) {
	var element = $('#pageLimit');
	element.html("");		//清空分页
	var typeName = $("#querys").val();		//搜索值
	var pageSize = 6;
	var aQuery = {'typeName': typeName, 'pageNum':page,'pageSize':pageSize};
	var url = "/mypage/index";

	$.ajax({
		url: url,
		type:'post',
		data: aQuery,
		success: function(data){
			var totalPages;
			if (data.list != null) {
				totalPages = data.pages;
				//writeBody(data.list);		//写入页面数据

				var options = {		//分页
					bootstrapMajorVersion : 4,		//版本
					currentPage : page, // 当前页数
					numberOfPages : 4, // 显示按钮的数量
					totalPages : totalPages, // 总页数
					itemTexts : function(type, page, current) {
						switch (type) {
							case "first": return "<<";
							case "prev": return "<";
							case "next": return ">";
							case "last": return ">>";
							case "page": return page;
						}
					},
					// 点击事件，用于通过Ajax来刷新整个list列表
					onPageClicked : function(event, originalEvent, type, page) {
						getPageOfMemo(page);
					}
				};
				var html='';
				$.each(data.list, function (i, obj) {
					html += '<tr><td id = "mes_id">'+obj.id+'</td><td>'+obj.name+'</td><td>'+obj.message+'</td><td>'+obj.time+'</td><td>';
					html += '<input type="button" id="mes_del_sub" value="删除" class="btn-primary"></td></tr>';
				});
				$('#messageList').empty();
				$('#messageList').append(html);
				$('#messageList').trigger("create");
				element.bootstrapPaginator(options);
			}

		},
		error: function(){
			alert("请求出错！");
		}
	});
};

//删除单个消息
$('#mes_del_sub').click(function mes_del() {
	alert("aa");
	var id = this.parent().parent().find("#mes_id").val();
	alert(id);
	$.ajax({
		url: '',
		type: "post",
		dataType: "text",
		data: {"username": username, "password": password},
		success: function (data) {
			var state = JSON.stringify(data);
			switch (state) {
				case '"200"':
					window.location.href = "./manager_message.html";
					break;
				case '"201"':
					alert("用户名或密码错误");
					break;
				case '"202"':
					alert("不能为空");
					break;
			}
		},
		error: function () {
			alert("添加失败");
		}
	});
});

这里我动态生成了 <input type="button" id="mes_del_sub" value="删除" class="btn-primary">，但是点击时发现绑定事件无效。

这是因为ajax载入新dom之前js就加载完了，事件当然没有绑定到新载入的dom上，自然无效。这时候需要用到事件委托：

       jQuery的事件委托就是利用事件冒泡的原理，通过把事件绑定到目标元素的父级元素上，从而借助一个元素上的事件处理程序完成多个工作。

       这里我们将事件直接委托到document，改为下面这样，事件绑定成功。

// 分页函数
function getPageOfMemo(page) {
	var element = $('#pageLimit');
	element.html("");		//清空分页
	var typeName = $("#querys").val();		//搜索值
	var pageSize = 6;
	var aQuery = {'typeName': typeName, 'pageNum':page,'pageSize':pageSize};
	var url = "/mypage/index";

	$.ajax({
		url: url,
		type:'post',
		data: aQuery,
		success: function(data){
			var totalPages;
			if (data.list != null) {
				totalPages = data.pages;
				//writeBody(data.list);		//写入页面数据

				var options = {		//分页
					bootstrapMajorVersion : 4,		//版本
					currentPage : page, // 当前页数
					numberOfPages : 4, // 显示按钮的数量
					totalPages : totalPages, // 总页数
					itemTexts : function(type, page, current) {
						switch (type) {
							case "first": return "<<";
							case "prev": return "<";
							case "next": return ">";
							case "last": return ">>";
							case "page": return page;
						}
					},
					// 点击事件，用于通过Ajax来刷新整个list列表
					onPageClicked : function(event, originalEvent, type, page) {
						getPageOfMemo(page);
					}
				};
				var html='';
				$.each(data.list, function (i, obj) {
					html += '<tr><td><input name = "mes_id" style="display: none;" value="'+obj.id+'">'+obj.id+'</td><td>'+obj.name+'</td><td>'+obj.message+'</td><td>'+obj.time+'</td><td>';
					html += '<input type="button" name="mes_del_sub" value="删除" class="btn-primary"></td></tr>';
				});
				$('#messageList').empty();
				$('#messageList').append(html);
				$('#messageList').trigger("create");
				element.bootstrapPaginator(options);
			}

		},
		error: function(){
			alert("请求出错！");
		}
	});
};

//删除单个消息
$("#mes_table").on("click", "input[name='mes_del_sub']", function() {
	var btn = $(this).parent().parent().find("input[name='mes_id']").val();
	alert(btn);
	return;
	$.ajax({
		url: '/mypage/massage/del',
		type: "post",
		dataType: "text",
		data: {"id": id},
		success: function (data) {
			var state = JSON.stringify(data);
			switch (state) {
				case '1':
					window.location.href = "./manager_message.html";
					break;
				case '0':
					alert("删除失败");
					break;
			}
		},
		error: function () {
			alert("删除失败");
		}
	});
});

说明：

后面这段代码比上面还改了一些其他的：

1.原来想通过<td>获取id的值，发现不行，需要用到<input>，将其设置为不可见

2.原来用id标记动态生成的标签，改用name