Javascript 骨干鼠标点击无效果

我的脊梁有点问题，我相信有人能帮我

这是我的HTML：

<div id="slides">
    <div class="slide map">
        Map
    </div>
    <div class="slide points">
        Table
    </div>
</div>

---

当我点击div时，回调没有执行

您的问题是视图不知道页面上的HTML。如果不设置视图的el元素，它就不会将事件绑定到DOM元素

要使示例有效，可以执行以下操作

标记名和类名不会从DOM中选择这些元素，它实际上会创建一个新元素作为视图的根元素，在本例中，它将是根元素

但最终您应该在视图原型上设置el属性

var SlideView = Backbone.View.extend({
    el: 'div.slide.map',    
    events: {
        'click': 'onClick'
    },

    onClick: function() {
        console.log("event !!!");
    }
});

或者更好的方法是，创建包含HTML的视图，然后在页面上放置对该视图的引用

var SlideView = Backbone.View.extend({
    tagName: 'div',
    className: 'slide map',

    render: function(){
        // this.$el is a equiv. to $(<[tagName] class="[className]"></[tagName>);
        this.$el.html("/* HTML String to go inside the tag */");
        return this;
    },

    events: {
        'click': 'onClick'
    },

    onClick: function() {
        console.log("event !!!");
    }
});

var slideView = new SlideView();
slideView.render();

$('#slides').prepend(slideView.$el);

---

您的代码看起来不错，只是在事件映射中遗漏了元素id。请尝试以下代码

events: {
    'click #slides': 'onClick'
}

---

这样做不会解决我的问题…它不应该执行。您在视图和现有节点之间没有映射，视图中没有任何模板，也没有渲染视图。slideView。$el.html提供映射或空字符串？slideView。$el.html提供空字符串！请参见我的答案，视图创建了一个与另一个元素相似的元素，但它不是同一个元素它缺少元素选择器。@rcarvalho如果不在其中放置选择器，则使用视图的根元素。从文档中：省略选择器会导致事件绑定到视图的根元素this.el。这是正确的方法。对于事件，我们必须指定事件、选择器和函数。这并不能解决问题，视图没有附加到任何DOM元素。

var SlideView = Backbone.View.extend({
    tagName: 'div',
    className: 'slide map',

    render: function(){
        // this.$el is a equiv. to $(<[tagName] class="[className]"></[tagName>);
        this.$el.html("/* HTML String to go inside the tag */");
        return this;
    },

    events: {
        'click': 'onClick'
    },

    onClick: function() {
        console.log("event !!!");
    }
});

var slideView = new SlideView();
slideView.render();

$('#slides').prepend(slideView.$el);

events: {
    'click #slides': 'onClick'
}