Backbone click event not firing on dynamic view

Question

I have a backbone view that creates a new div for each model that is passed into it. However, I cannot get any sort of events to fire (click a.change-status) on the view and I assume it's because the elements inside of it are also generated from a template. Please let me know if there's some way around this. ``` var videoDivView = Backbone.View.extend({ el: '

', initialize: function(){ _.bindAll(this); this.render(); this.model.on('change:published', this.enableSaveButton); }, events: { 'click a.change-status' : 'changeVideoStatus' }, template: video_tmpl, render: function(){ this.$el.attr("id", 'video-'+this.model.id); this.$el.html(this.template(this.model.toJSON())); this.$el.data('status', video_statuses[this.model.get('published')]); }, changeVideoStatus: function(e) { console.log(this.model); return false; }, enableSaveButton: function() { $('#save-changes').removeClass('disabled').removeAttr('disabled'); } }); ``` an example template would look like:…

Accepted Answer

There are some things that might be the cause of the problem. First of all, your `el` declaration seems to be suspect. If you want a div with that class you just have to define the `className` attribute since the default for backbone views is `div`. Instead of: `el: '

'` just use: `className: 'vendor-video'` I don't see any details about your view initialization methods but the best practice is to initialize a view and then render it to the container: ``` var yourVideoDivView = new videoDivView({model: model}); $("#your-video-container").html(yourVideoDivView.render().el) ``` also to get the last line work you have to `return this;` on your render method. ``` render: function(){ ... return this; } ``` About using `this.delegateEvents()`, you should call this function after your view is already in the `DOM` otherwise it makes no sense. ie: ``` $("#your-video-container").html(yourVideoDivView.render().el) yourVideoDivView.delegateEvents(); ``` `delegateEvents()` will makes your view events alive again.

Backbone click event not firing on dynamic view

Solution

Problem