Backbone View events not firing after the view is replaced, then put back on the page

Question

Problem:

Events that are set inside a view are not firing after the view is replaced with something else using $element.html(anotherView) and then put back on the page using #element.html(theView).

Example:

var BuggyView = Backbone.View.extend({
    // Event works the at first, but not after the view is replaced, then added back
    //     onto the page
    events:{
        'click #some-element': 'on_click_some_element'
    },
    // This function gets called before the view is replaced by another view, but
    //     not after it is added back into the page the second time
    on_click_some_element:function(event){
        alert('User clicked "some element"');
    }
});

The events work after this code executes:

// Create the new view:
var buggyView = new BuggyView({});
// Add the view to the page
$element.html(buggyView.el);

This code would happen later when the view is replaced on the page with something else:

$element.html(anotherView.el);

After the view is added back onto the page, the events no longer work:

$element.html(buggyView.el);

score 1 · Answer 1 · answered Jul 24 '12 at 20:01

1

Run render after set the element of the view in the DOM:

$element.html(anotherView.el);
anotherView.render();

$element.html(theView.el);
theView.render();

Probably your issue is that the render did not run again. You are only switching the DOM assignment.

answered Jul 24 '12 at 20:01

Daniel Aranda

6,426
2
21
28

The render() did not work, but adding delagateEvents() did work. Thanks anyway though! – Chris Dutrow Jul 25 '12 at 14:55

score 1 · Accepted Answer · answered Jul 24 '12 at 20:02

1

Most likely when you are removing your view you are also removing the views' bound events, You probably need to either redelgate your events. or instead of using the (jquery) .remove use .detach.

answered Jul 24 '12 at 20:02

Jack

10,943
13
50
65

The isn't being removed, its being replaced with something else using $element.html(anotherView.el) – Chris Dutrow Jul 24 '12 at 20:11
Where is your `BuggYView el` while it's being replaced with `anotherView`? Also did you try calling delegateEvents after replacing the `buggyView el`? – Jack Jul 24 '12 at 20:15
1

Adding .delagateEvents() worked. Thanks so much for your help! – Chris Dutrow Jul 25 '12 at 14:55

Backbone View events not firing after the view is replaced, then put back on the page

Problem:

2 Answers2