ajax刷新的元素里jquery绑定事件失效-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ajax刷新的元素里jquery绑定事件失效

2016-05-27 08:34:48 2724 1
<div class="box box-widget">
                            <div style="display: block;" class="box-body">

                                <p>邀请了微软office负责人演示[拜拜]</p>
                                
                                <div>
                                    <span class="text-muted">Thu Sep 10 17:03:57 CST 2015</span>
                                    <span class="text-muted">0转发</span>
                                    <div class="pull-right">
                                        <input type="hidden" name="weibo_id" value="3885571242155022">
                                        <button class="btn btn-box-tool dbtn"><i class="fa fa-times"></i></button>
                                        <button class="btn btn-danger btn-flat btn-xs bbtn "><i class="fa-hand-stop-o"></i>拉黑</button>
                                        <button class="btn btn-success btn-flat btn-xs cbtn "><i class="fa fa-comments-o margin-r-5"></i>0评论</button>
                                    </div>
                                </div>

                            </div>
                            <div style="display: block;" class="box-body box-comments">
                        <!--  ajax从后台取回来的部分 -->
                            <div class="box-comment">
                                    <!-- User image -->
                                    <img class="img-circle img-sm" src="http://tp2.sinaimg.cn/3888714809/180/5727878850/1" alt="user image">
                                    <div class="comment-text">
                                        <span class="username">有人说刘伟楠这个<span class="text-muted pull-right">Sat Sep 12 16:41:23 CST 2015</span>
                                        </span>
                                        <!-- /.username -->
                                        测试测试测试
                                        <span class="text-muted pull-right">
                                            <input type="hidden" name="comment_id" value="3886290342368683">
                                            <a href="#" class="link-black text-sm rbtn"><i class="fa fa-share margin-r-5"></i>回复</a>
                                        </span>
                                    </div>
                                    <!-- /.comment-text -->
                                </div>

                        <!--  通过开关控制打开关闭,同时后台获取<div style="display: none;" class="box-body box-comments"> -->
                                
                                <form class="form-inline" action="#" method="post">
                                    <div class="input-group">
                                        <input type="hidden" name="weibo_id" value="3885571242155022">
                                        <input name="message" placeholder="Type Message ..." class="form-control" type="text"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-primary btn-flat sbtn">发送</button>
                                    </span>
                                    </div>
                                </form>

                    <!--  /ajax从后台取回来的部分 -->
                            </div>

                        </div>

screenshot
为什么对<a href="#" class="link-black text-sm rbtn"><i class="fa fa-share margin-r-5"></i>回复</a>绑定的时间会失效了?单纯静态网页的时候是可以触发动作,使用了动态刷新就会失效。这是什么原因?jquery只对页面载入的部分元素进行选择?

$(".cbtn").click(function(){//打开评论列表
    var boxComments=$(this).parent().parent().parent().parent().children(".box-comments");
    var weibo_id=$(this).parent().children("input[name='weibo_id']").val();//获取同一级表单的值
    $.ajax({
        url:"comment/index",
        method:"POST",
        data:"weibo_id="+weibo_id,
        success:function (content){
            boxComments.html(content);//评论框内容,后台渲染模板
        },
        error:function (content){
        
        }
    });
    boxComments.toggle('fast');
});
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:16:55

    query事件绑定有2种方式,1种是直接绑定在所选择的dom元素上,这种方式,当你替换dom元素的时候,就不生效了,打个比方,你养了只鹦鹉,你教会它跟着你说hello,这个时候别人把你的鹦鹉换了一只了,新的鹦鹉无论你怎么说hello也不会有反应的,另1钟是事件代理或者叫事件委托,事件绑定的元素并不是触发的元素,而是其父元素,这时候只要父元素没被替换掉,子元素不管怎么替换,只要符合开始绑定的选择器,就可以触发

    2种写法的区别,在老版本里面有很多种,1.7以后,推荐统一用on,在on方法的参数内不写选择器是第1种,写虚增其则是第2种

    0 0
相关问答

1

回答

jquery ajax 跨域请求后,同步设置会无效,求设置同步的方法 - jquery报错

2020-05-29 23:36:58 448浏览量 回答数 1

1

回答

用jquery ajax发送下载文件请求到后台不可以下载吗? 400 请求报错 

2020-05-29 22:57:12 409浏览量 回答数 1

1

回答

jquery ajax()请求图片,再转码为base64进行显示,不可以吗?求大神指教 400 请求

2020-05-29 15:18:40 578浏览量 回答数 1

1

回答

jquery ajax 跨域请求后,同步设置会无效,求设置同步的方法

2020-05-28 09:18:27 318浏览量 回答数 1

1

回答

如何使用jQuery / AJAX和PHP / MySQL根据选择的第一个下拉列表填充第?mysql

2020-05-17 14:23:46 327浏览量 回答数 1

1

回答

使用Jquery Ajax从Mysql检索数据

2020-05-10 21:40:48 388浏览量 回答数 1

1

回答

axios,fetch,ajax(jquery)的区别 vuex是什么?怎么使用?哪种场景使用它?

2020-02-17 15:45:45 336浏览量 回答数 1

1

回答

Bootstrap2不能用JQuery AJAX方式提交表单吗?

2020-01-07 13:24:48 695浏览量 回答数 1

1

回答

使用jQuery .ajax()PUT请求API无效

2020-01-04 19:19:11 1199浏览量 回答数 1

1

回答

面试之jquery中的ajax方法参数

2019-12-16 14:53:24 1538浏览量 回答数 1
文章
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载