ajax加载进去的内容绑定事件不生效

2019独角兽企业重金招聘Python工程师标准>>>

 遇到的问题：在对象中的top方法中绑定一个click事件,但无法绑定成功。

误区：认真查看，发现只有在请求ajax的时候，这个top方法才不能正常绑定事件，当时候觉得是因为还未动态生成出来就进行绑定a事件，所以绑定不成功，但查了资料dom树是实时更新的，所以跟顺序没有关系。

(function(){
  // 评论条对象
  // 属性：内容
  // 方法：点赞，踩，删除
  window.Comment = function (json){
    this.content = json.content || "";
    this.acc = json.acc || 0;
    this.ref = json.ref || 0;
    this.id = json.id;

    // this.top();
    this.cut();
    this.down_icon();
  };
  Comment.prototype = {
    constructor: Comment,
    render: function(){

      var newCom = document.createElement("div");
      newCom.className = "reply";


      var str = "";
      str += '<p class="replyContent">'+ this.content +'</p>';
      str += '<p class="operation">';
      str += '<span class="replyTime">2011-09-08 16:37:60</span>';
      str += '<span class="handle">';
      str += '<a href="javascript:;" class="top">'+this.acc+'</a>';
      str += '<a href="javascript:;" class="down_icon">0</a>';
      str += '<a href="javascript:;" class="cut">删除</a>';
      str += '</span>';
      str += '</p>';
      newCom.innerHTML = str;

      return newCom;
    },
    cut: function(){

    },
    top: function(){
      var top1 = this.render().getElementsByTagName("a")[0];

      var self = this;
      top1.addEventListener("click", function(){
        console.log(1);
        ajax({
          url: "weibo.php",
          data: {
            "act": "acc",
            "id": self.id
          },
          success: function(str){
            var json = eval("("+ str +")")
            if(json.error == 0){

              self.acc += 1;
              console.log(1);
            }
          }
        });
      });
    },
    down_icon: function(){}
  };
})();

误区2：后来我想到难道是延时的问题吗？ajax请求和绑定事件都有延时操作，所以直接把top方法传递一个参数接收外面传进来的函数，这个函数去做绑定操作。

    var fn1 = function(){
        var ms = document.getElementsByClassName("top")[0];
        ms.addEventListener("click", function(){
            console.log(1);
        });
    }

top: function(fn){
      var top1 = this.render().getElementsByTagName("a")[0];
      fn();
     }

就这样竟然达到我想要的绑定效果。。。。。。其实不知道我这样想有没有道理但

结论：通过ajax加载进来的js默认是不会执行的，同样通过ajax加载进来的dom元素默认也是没有事件的;

如果要给通过ajax加载进来的dom元素绑定事件,1、使用delegate(JQ方法)，在初始化页面时，将事件绑定到已经存在的页面元素中

 

 

转载于:https://my.oschina.net/u/2949632/blog/847928