オブジェクト指向のJavaScriptで動的に作成された要素にイベントをバインドする

Question

私は動的に作成されたJavascriptクラスを持っています。

ポストカードはAjaxから動的に作成されます。これは動的に作成されるため、ajaxをロードした後は、この$ propose_buttonはクリックされません。

var PostCard = function($root) { 
    this.$root = $root; 
    this.stuff_id = this.$root.data('stuff_id'); 
    this.id = this.$root.data('id'); 
    this.is_owner = this.$root.data('is_owner'); 
    this.$propose_button = null; 
    this.$favorite_button = null; 
    this.$total_favorite = null; 
    this.$image_view_editor = null; 
    this.image_view_editor = null; 
    this.$proposal_box_modal = null; 
    this.proposal_box = null; 
    this.$proposal_box = null; 
    this.init(); 
    this.initEvents(); 
}; 

PostCard.prototype.initEvents = function() { 
    var self =this; 
    this.$propose_button.on("click", function(e) { 
     if(self.is_owner) { 
      return false; 
     } 
     if(CommonLibrary.isGuest()) { 
      return false; 
     } 
     self.$proposal_box_modal.modal("show").load($(this).attr("value")); 

    }); 
} 

PostCardはPostListクラスで動的に作成されます。

var PostList = function($root) { 
    this.$root = $root; 
    this.stuff_ids = ''; 
    this.id = $root.data('id'); 
    this.location = $root.data('location'); 
    this.query = ''; 
    this.post_cards = []; 
    this.$post_list_area = null; 
    this.permit_retrieve_post = true; 
    this.init(); 
    this.initEvents(); 
}; 

それはそれが発射された場合、それは動的に私は$（文書）.on（イベント、セレクタ、コールバック）することなく、解決策を知りたい

PostList.prototype.retrievePostWhenScroll_ = function(e) { 
    var self = e.data.self; 
    var scrollPercentage = 
      ((document.documentElement.scrollTop + document.body.scrollTop)/
      (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100); 
    if(scrollPercentage > PostList.prototype.SCROLL_VALUE) { 
     if(self.permit_retrieve_post) { 
      self.permit_retrieve_post = false; 
      $.ajax({ 
       url: $("#base-url").val() + "/site/get-more-posts", 
       type: 'post', 
       data: {'ids' : self.stuff_ids, query: self.query, location: self.location}, 
       success: function(data) { 
        var parsedData = JSON.parse(data); 
        if(parsedData['status'] === 1) { 
         self.$post_list_area.append(parsedData['view']); 
         $(parsedData['view']).filter('.post-card').each(function(index, value) { 
          self.post_cards.push(new PostCard($(value))); 
          self.stuff_ids += "," + $(value).data('stuff_id'); 
         }); 
        } 
        self.permit_retrieve_post = true; 
       }, 
       error : function(data) { 
        self.permit_retrieve_post = true; 

       } 
      }); 
     } 
    } 

}; 

はがきクラスをロードするという方法がありますクラス属性を保持する必要があるからです。 $（document）を使用すると、PostCardクラスの属性を検出できません。

イベントが要素に直接接続されている溶液が好ましいが、しかし、私はまた、他の実行可能な解決策を受け入れる

Answer 1

はこれを試してみてください;）

これを行うには、2つの方法があります。

1は、 。デリゲートイベント：AJAX応答で

2.バインドイベント

2番目以外のものを選択できます。応答self.$post_list_area.append(parsedData['view']);の後のajaxの応答では、イベントをDOM要素にバインドできます。