开始的时候,我在页面上有这样一个 hml 语句:
<td><i><a href="BlogAction_deleteBlog?bid=<s:property value='#mb.id'/>">删除</a></i></td>
我使用 jquery 为这个超链接增加了点击事件,希望使用 ajax 方式删除这一条记录,后台是 struts2 在处理。点击事件是这样的:
$("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 表示删除是否成功,目前这个可以正常工作。
后来我有新的要求,使用 jquery 动态生成了上面了那个 html 代码,就是这个:
<td><i><a href="BlogAction_deleteBlog?bid=<s:property value='#mb.id'/>">删除</a></i></td>
意思是这句 html 代码是我使用 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 的开发者工具查看了动态生成后的页面代码,跟之前的格式是完全一样的,可是 ajax 删除的那段代码却不执行了,求大神解答,不胜感激!!
![]() | 1 laobaozi 2015-12-03 17:16:29 +08:00 动态生成的代码需要使用 jquery 的 on 来代理 |
![]() | 2 iTakeo 2015-12-03 17:17:16 +08:00 动态生成的 DOM ,请使用 on 来绑定事件 |
![]() | 3 cornelia 2015-12-03 17:17:44 +08:00 ![]() 操作动态生成的元素要用 delegate |
![]() | 4 laobaozi 2015-12-03 17:18:41 +08:00 还有像这种创建 HTML 的,直接拼字符串,简单粗暴 |
![]() | 5 popo233 2015-12-03 17:19:45 +08:00 自行搜索 jquery delegate |
6 xuyinan503 2015-12-03 17:21:52 +08:00 页面初始化 有了 a1 , a2 , a3 $("i > a").click(function(){ 通过这段代码 a1 , a2 , a3 绑定了 onclick 事件 页面加载完成 你点击了按钮,生成了 a4 没给 a4 加上 onclick 事件 所以 a4 理所当然的不执行 |
![]() | 7 zonghua 2015-12-03 17:23:40 +08:00 这代码,比我写的还烂。。。 |
![]() | 8 ccbikai PRO 楼上已经给出答案了 吐槽一下 var $td = $(this).parent().parent().parent(); |
![]() | 9 learnshare 2015-12-03 17:46:04 +08:00 今天已经至少三个帖子,需要去了解 事件委托 了 |
![]() | 10 cdxem713 2015-12-03 18:08:59 +08:00 via iPhone 昨天刚回复过一个几乎一样的帖子,楼主善用搜索 |
15 creatorYC OP @xuyinan503 呃呃,明白了,谢谢! |
![]() | 16 duteng612 2015-12-03 22:45:47 +08:00 via iPhone 额 我介意你做下 html , js 分离。各司其职 |
![]() | 17 solar 2015-12-03 23:14:27 +08:00 $(selector).on('click', function() { //dosomething }) |
18 nihaov 2015-12-04 16:45:01 +08:00 |