Question

我有一个动态创建的Javascript类。

PostCard是从Ajax动态创建的。因为它是动态创建的，所以在ajax加载之后，不会点击此。$ proposal_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();
};

它有一个方法，如果它被触发，它将动态加载PostCard类

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）.on（事件，选择器，回调）的解决方案 - 因为必须保留class属性。如果使用$（document），则无法检测PostCard类中的属性。

将事件直接附加到元素的解决方案是首选，但我也接受其他可行的解决方案

Answer 1

试试这个;）

有两种方法可以做到这一点：

<强> 1。委派活动：

<强> 2。在ajax响应中绑定事件

你可以选择任何，但优先选择2nd。在ajax此语句之后的self.$post_list_area.append(parsedData['view']);响应中，您可以将事件绑定到DOM元素;

在面向对象的Javascript中将事件绑定到动态创建的元素

1 个答案: