开始的时候,我在页面上有这样一个 html 语句:
<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 1
操作动态生成的元素要用 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 2015-12-03 17:41:19 +08:00
楼上已经给出答案了 吐槽一下 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
|