Question

I was trying the backbone.js examples given here and then tried writing some code on my own.

For some reason the event handler I have attached to event ‘click p’ is not working. Why is the ‘highlight’ function not executing when a paragraph tag is clicked?

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

This event it targeting any <p> element inside your root element. It is not targeting your root element, even if your root element is a <p> element.

Try:

events: {
  'click': 'highlight'
}

To target the root element.