javascript - 当附加到元素的顶级类时，主干 View 事件不会触发

Question

我有一个附加到 View 的点击事件，该 View 的 el 是使用 className 和 tagName 定义的。呈现此 View 后，不会为 className 选择器触发点击事件。

下面是我的观点-

define([
'jquery',
'underscore',
'backbone',
'models/MovieModel',
'text!templates/movieTemplate.html'
],function($,_,Backbone,Moviemodel,movieTemplate){

var Moviesview= Backbone.View.extend({
    tagName:'div',
    className:'box',
    events : {
        'click .box': 'boxClicked'

    },
    boxClicked: function(){ 
           alert('world');
    },
    initialize: function(){

    },
    render: function(){

        var data= {moviemodel: this.model.toJSON(), _:_ };
        var compiledTemplate =_.template(movieTemplate);
        compiledTemplate= compiledTemplate(data);
        this.$el.html(compiledTemplate);
        return this;
    }
});
return Moviesview;
});

此 View 正在从另一个 View 中调用-

define([
    'jquery',
    'underscore',
    'backbone',
    'models/MovieModel',
    'views/movieview',
    'views/detailedmovieview'
], function ($, _, Backbone, Moviemodel, Movieview, Detailedmovieview) {
var Movieslistview = Backbone.View.extend({

        el: $('.content'),
        initialize: function () {
            var that = this;
            this.collection.fetch({
                success: function (collection, response) {
                    that.render();
                },
                error: function () {
                    alert('failed!');
                }
            });
        },
        render: function () {
            this.collection.each(function (row) {
                var temp = new Movieview({
                        model: row
                    });
                this.$el.append(temp.render().el);

            }, this);
            return this;
        }
    });
return Movieslistview;

});

这里使用的模板-

<div class='main-content'>
 <div class="actors">
   <div class="actors-label">Actors:</div>
   <div class="actors-name"><%= moviemodel.actor_1_name %></div>
 </div>
 <div class="additional-info">               
 </div>
</div>

.main-content 和 .additional-info 的点击事件正确触发，但 .box 的点击事件不正确。

Answer 1

为了将事件附加到 View 元素，您的事件绑定(bind)应该是:

events : {
    'click': 'boxClicked'
},