获取后台接口数据,动态生成html代码,原来jquery的点击事件不能用了,这是为啥?

获取后台接口数据,动态生成html代码,原来jquery的点击事件不能用了,这是为啥?代码如下:
index.html文件代码:
有引用aa.js
$(function(){
$.ajax({

        type:"post",
                     url:"http://mobiletest.jomoo.cn:10001/mxm/api/v1/paper/getPaperList",
        async:true,
        data:{
          jsonparm:{
            "pageNo":"1",
            "pageSize":"10"
          }
        },
        success: function(data) {
          console.log(data.detail.list.length);
          console.log(JSON.stringify(data))
          for(var i=0;i<=data.detail.list.length;i++){

          }
          var arr = [];
          var htmlc =
                "<div class='jm_row_list'>"+
                  "<div class='jm_row_line clearfix'>"+

                    "<!--微博主信息 -->"+
                    "<dl class='jm_cardwrap jm_feed_type'>"+....省略
          arr.push(htmlc);
          var reshtml = arr.join("");
          $(".textBody").html(reshtml);

})
aa.js代码
$(function(){

/*查看图片*/
$(".jm_cardwrap jm_feed_type").click(function(){
    var thisSrc = $(this).attr("src");
    var thisIndex = $(this).index();
      //没有从ajax获取数据之前,这些代码可以用,获取ajax数据,组装好,显示在页面后,这些代码不起作用了,为什么呢?求答案哦。    
阅读 7.3k
6 个回答

$(".jm_cardwrap jm_feed_type")这个选择器应该是有问题的,按照你ajax返回的内容应该是$(".jm_cardwrap.jm_feed_type");
再继续问题的关键:

$(".jm_cardwrap.jm_feed_type").click(function(){}) // 这块只能绑定一开始的$(".jm_cardwrap.jm_feed_type"),通过ajax新生成的没有绑定该事件,所以点击不会有相应

解决办法:
1.jQuery 1.7版以前使用live动态绑定事件

$(".jm_cardwrap.jm_feed_type").live('click', function(){
    
});

2.jQuery 1.7版以后使用on动态绑定事件

$(".textBody").on('click', '.jm_cardwrap.jm_feed_type', function(){
    
});

页面加载,并未找到指定的对象,没有绑定点击事件。后面动态的加载进来,也没有绑定事件。

解决办法:
$("页面上存在的父元素").on("click","动态加的子元素",function(){
//do something
})

这个涉及到js实现异步的方式,你可以这么理解就是在你click事件触发的时候,你说拼接的html还没有插入到dom中,所以你使用的$(".jm_cardwrap jm_feed_type"),其实并没有获取到相应的节点,如果你要实现点击效果的话可以使用<div class='jm_row_line clearfix' onclick='clickFun()'>这种数据

$(".jm_cardwrap jm_feed_type") 这里,我觉得是不是 $(".jm_cardwrap") 或者 $(".jm_feed_type") 才能获取到你想要的元素

使用jquery的on方法动态监听,这样新加的元素也能监听到

绑定click事件的时候那段html还没有插入dom 因为回调一步的还没有执行那一块
建议click绑定在插入的那段html的父元素上

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题