V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
creatorYC
V2EX  ›  jQuery

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

  •  
  •   creatorYC · 2015-12-03 17:10:51 +08:00 · 2815 次点击
    这是一个创建于 3060 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    19 条回复    2015-12-04 16:49:50 +08:00
    laobaozi
        1
    laobaozi  
       2015-12-03 17:16:29 +08:00
    动态生成的代码需要使用 jquery 的 on 来代理
    iTakeo
        2
    iTakeo  
       2015-12-03 17:17:16 +08:00
    动态生成的 DOM ,请使用 on 来绑定事件
    cornelia
        3
    cornelia  
       2015-12-03 17:17:44 +08:00   ❤️ 1
    操作动态生成的元素要用 delegate
    laobaozi
        4
    laobaozi  
       2015-12-03 17:18:41 +08:00
    还有像这种创建 HTML 的,直接拼字符串,简单粗暴
    popo233
        5
    popo233  
       2015-12-03 17:19:45 +08:00
    自行搜索 jquery delegate
    xuyinan503
        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 理所当然的不执行
    zonghua
        7
    zonghua  
       2015-12-03 17:23:40 +08:00
    这代码,比我写的还烂。。。
    ccbikai
        8
    ccbikai  
       2015-12-03 17:41:19 +08:00
    楼上已经给出答案了 吐槽一下 var $td = $(this).parent().parent().parent();
    learnshare
        9
    learnshare  
       2015-12-03 17:46:04 +08:00
    今天已经至少三个帖子,需要去了解 事件委托 了
    cdxem713
        10
    cdxem713  
       2015-12-03 18:08:59 +08:00 via iPhone
    昨天刚回复过一个几乎一样的帖子,楼主善用搜索
    creatorYC
        11
    creatorYC  
    OP
       2015-12-03 19:15:17 +08:00
    @laobaozi 有时候有这种需求吧,也许是我没有想到更好的办法......囧
    creatorYC
        12
    creatorYC  
    OP
       2015-12-03 19:16:21 +08:00
    @laobaozi
    @iTakeo
    @cornelia
    @popo233 谢谢,我去搜搜
    creatorYC
        13
    creatorYC  
    OP
       2015-12-03 19:18:32 +08:00
    @zonghua 额,为什么这么说啊?我还是学生,能不能指点一下,以后工作也不至于被骂 .......
    creatorYC
        14
    creatorYC  
    OP
       2015-12-03 19:19:58 +08:00
    @cdxem713 有时候不知道一个复杂的问题不知道怎么搜索,不知道怎么组织关键词
    creatorYC
        15
    creatorYC  
    OP
       2015-12-03 19:22:39 +08:00
    @xuyinan503 呃呃,明白了,谢谢!
    duteng612
        16
    duteng612  
       2015-12-03 22:45:47 +08:00 via iPhone

    我介意你做下 html , js 分离。各司其职
    solar
        17
    solar  
       2015-12-03 23:14:27 +08:00
    $(selector).on('click', function() {
    //dosomething
    })
    nihaov
        18
    nihaov  
       2015-12-04 16:45:01 +08:00
    @ccbikai 的问题可以用
    .closest('') 或者 .parents('') 解决
    比写一串 parent 逼格要高。
    creatorYC
        19
    creatorYC  
    OP
       2015-12-04 16:49:50 +08:00
    @nihaov 呃呃,我试试,之前只是觉得那样简单一点,嘿嘿,谢谢指点,问题已经解决了,多谢你们的帮忙
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1709 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 16:39 · PVG 00:39 · LAX 09:39 · JFK 12:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.