请教大家一个 jquery 的问题,大家帮帮我!

2015-12-03 17:10:51 +08:00
 creatorYC

开始的时候,我在页面上有这样一个 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 删除的那段代码却不执行了,求大神解答,不胜感激!!

2924 次点击
所在节点    jQuery
19 条回复
laobaozi
2015-12-03 17:16:29 +08:00
动态生成的代码需要使用 jquery 的 on 来代理
iTakeo
2015-12-03 17:17:16 +08:00
动态生成的 DOM ,请使用 on 来绑定事件
cornelia
2015-12-03 17:17:44 +08:00
操作动态生成的元素要用 delegate
laobaozi
2015-12-03 17:18:41 +08:00
还有像这种创建 HTML 的,直接拼字符串,简单粗暴
popo233
2015-12-03 17:19:45 +08:00
自行搜索 jquery delegate
xuyinan503
2015-12-03 17:21:52 +08:00
页面初始化
有了 a1 , a2 , a3
$("i > a").click(function(){
通过这段代码 a1 , a2 , a3 绑定了 onclick 事件
页面加载完成
你点击了按钮,生成了 a4
没给 a4 加上 onclick 事件

所以 a4 理所当然的不执行
zonghua
2015-12-03 17:23:40 +08:00
这代码,比我写的还烂。。。
ccbikai
2015-12-03 17:41:19 +08:00
楼上已经给出答案了 吐槽一下 var $td = $(this).parent().parent().parent();
learnshare
2015-12-03 17:46:04 +08:00
今天已经至少三个帖子,需要去了解 事件委托 了
cdxem713
2015-12-03 18:08:59 +08:00
昨天刚回复过一个几乎一样的帖子,楼主善用搜索
creatorYC
2015-12-03 19:15:17 +08:00
@laobaozi 有时候有这种需求吧,也许是我没有想到更好的办法......囧
creatorYC
2015-12-03 19:16:21 +08:00
@laobaozi
@iTakeo
@cornelia
@popo233 谢谢,我去搜搜
creatorYC
2015-12-03 19:18:32 +08:00
@zonghua 额,为什么这么说啊?我还是学生,能不能指点一下,以后工作也不至于被骂 .......
creatorYC
2015-12-03 19:19:58 +08:00
@cdxem713 有时候不知道一个复杂的问题不知道怎么搜索,不知道怎么组织关键词
creatorYC
2015-12-03 19:22:39 +08:00
@xuyinan503 呃呃,明白了,谢谢!
duteng612
2015-12-03 22:45:47 +08:00

我介意你做下 html , js 分离。各司其职
solar
2015-12-03 23:14:27 +08:00
$(selector).on('click', function() {
//dosomething
})
nihaov
2015-12-04 16:45:01 +08:00
@ccbikai 的问题可以用
.closest('') 或者 .parents('') 解决
比写一串 parent 逼格要高。
creatorYC
2015-12-04 16:49:50 +08:00
@nihaov 呃呃,我试试,之前只是觉得那样简单一点,嘿嘿,谢谢指点,问题已经解决了,多谢你们的帮忙

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/240908

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX