主干.js事件处理程序不起作用

Question

我正在尝试这里给出的主干.js示例，然后尝试自己编写一些代码。

由于某种原因，我附加到事件"单击 p"的事件处理程序不起作用。为什么单击段落标签时不执行"突出显示"功能？

var ItemView = Backbone.View.extend({
    tagName : 'p',
    events: {
        'click p': 'highlight'
    },
    initialize: function(){
        console.log("An object of ItemView was created");
        _.bindAll(this, 'render', 'highlight');
        this.render();   
    },
    render: function(){
        this.$el.text(this.model.get('content'));
        $('body').append(this.$el);
        return this;
    },
    highlight: function(){
        console.log('clicked');
    }
});

Answer 1

此事件它针对根元素内的任何<p>元素。它不以根元素为目标，即使您的根元素是<p>元素也是如此。

尝试：

events: {
  'click': 'highlight'
}

以根元素为目标。

Answer 2

嗯...在你的渲染中，你用这个替换所有的正文内容.$el。我认为当您替换所有内容时，您已经有效地"解开"了事件哈希。因此，在执行追加后，像这样调用this.delegateEvents（）：

render: function(){
    this.$el.text(this.model.get('content'));
    $('body').append(this.$el);
    this.delegateEvents();
    return this;
}

这应该允许您单击段落标签。