Question

How can i add click event to my el elements in this case multiple li’s. I’m trying to remove li from the dom on click, but the click event is not firing.

App.Views.ListItem = Backbone.View.extend({

    el : 'li',
    Wrapper : '#list_cntr ul',
    template : 'tmplItem',

    events : {
        'click li' : 'removeMe'
    },

    initialize : function() {

        this.render();
    },

    render : function() {
        $(this.Wrapper).prepend($(this.el).html(App.Templates[this.template](this.model.toJSON())));
    },

    removeMe : function() {
        var eventList = App.Collections.eventCollectionList;
        var eid = this.model.get('id');
        eventList.remove(eid);

       //How to remove the li?
    }

});

Answer 1

From the fine manual:

delegateEvents delegateEvents([events])

[…] Omitting the selector causes the event to be bound to the view’s root element (this.el).

The el for your view is the <li> that you want a click handler on so you should be able to drop the selector in your events:

events : {
    'click' : 'removeMe'
},

That will bind removeMe to clicks on the <li> itself.

You’re also setting el: 'li' when you want to say tagName: 'li'. The el property is your view’s DOM element but 'li' won’t do anything useful. If you specify a tagName then Backbone will create the <li> for you and this.el will be the view’s single <li>. This is probably where the strange “it looks like all the <li>s” behavior you’re seeing comes from.

Your view should look more like this:

App.Views.ListItem = Backbone.View.extend({
    tagName : 'li',
    //...
    events : {
        'click' : 'removeMe'
    },
    //...
    removeMe : function() {
        var eventList = App.Collections.eventCollectionList;
        var eid = this.model.get('id');
        eventList.remove(eid);
        this.remove();
    }
});

Demo: http://jsfiddle.net/ambiguous/MTh57/