没有在添加到 DOM 的新元素上触发主干事件答案

【问题标题】：Backbone events not firing on new element added to DOM没有在添加到 DOM 的新元素上触发主干事件
【发布时间】：2012-11-02 16:34:14
【问题描述】：

我正在使用车把和 Backbone 的组合。我有一个“容器”视图，它有一个数组来保存子视图。每当我添加新视图时，都不会绑定点击事件。

我的帖子视图：

Post.View = Backbone.View.extend({
    CommentViews: {},
    events: {
        "click .likePost": "likePost",
        "click .dislikePost": "dislikePost",
        "click .addComment button": "addComment"
    },
    render: function() {
        this.model.set("likeCount", this.model.get("likes").length);
        this.model.set("dislikeCount", this.model.get("dislikes").length);
        this.$('.like-count').html(this.model.get("likeCount") + " likes");
        this.$('.dislike-count').html(this.model.get("dislikeCount") + " dislikes");

        return this;
    }, ...

我在“容器”视图中的回调代码创建了一个新的主干视图，将其附加到车把模板并显示在页面上：

success: _.bind(function(data,status,xhr) {
                        $(this.el).find("#appendedInputButton").val('');
                        var newPost = new Post.Model(data);
                        var newPostView = new Post.View({model: newPost, el: "#wall-post-" + newPost.id});
                        var source = $("#post-template").html();
                        var template = Handlebars.compile(source);

                        var html = template(newPost.toJSON());
                        this.$('#posts').append(html);
                        newPostView.render();
                        this.PostViews[newPost.id] = newPostView;
                    }, this), ...

不确定发生了什么，但最初运行这种代码是为了设置页面（没有把手，因为 html 是在服务器端呈现的）并且所有事件都可以正常工作。如果我重新加载页面，我也可以喜欢/不喜欢帖子。

我错过了什么？

【问题讨论】：

标签： javascript backbone.js handlebars.js

【解决方案1】：

我没有看到您将 newPostView.render().el 附加到 dom 。或者我错过了什么？

【讨论】：

【解决方案2】：

假设“#post-template”包含“likePost”按钮。 newPostView 永远不会添加到 DOM 中。

将 el 添加到新的 Post.View 使主干搜索 DOM（并且该元素尚不存在） 4 行后，一个 HTML 字符串被添加到 DOM（假设 this.el 已经在 DOM 中）

如果您在 append(html) 之后创建 Post.View，则可以找到该元素并触发事件。
但是自然的 Backbone 方法是在 Post.View 渲染函数中渲染 HTML 字符串，将结果附加到它的 el 并将该 el 附加到 #posts 元素。

success: function (data) {
  var view = new Post.View({model: new Post.Model(data)});
  this.$('#posts').append(view.render().el);
  this.PostViews[data.id] = view;
}

【讨论】：