重新初始化主干视图后未触发事件

Question

I'm trying to tidy code in my Backbone project. One of the problems I face is that I initialise all my views in the render's initialise function. I've now decided to only initialise a single view (and it's children) at a time.

The rendering of the pages works and I can swap backward and forward between views. Events that are bound in the view fire after a hard refresh of the page (F5 etc) but once I've moved to another view, the events no longer fire. I don't understand why as the previous view should be totally removed on second initialisation. We should then get a clean render, just as it would be on first load after a refresh. Can anyone explain why the events aren't firing?

Below are code examples to demonstrate the problem:

newView: function(view){
            //Check if the holding variable is defined. If it is then  
            //call the close function
            if (routerView == undefined){
                console.log("routerview is undefined")
            } else {
                // This calls a function on the view which will remove any
                //children, once it's done that it will remove its self.
                routerView.close();
            }

            // When removing the view it removes the parent element in the index file.
            // Here we add the container back in and set it to the new view's el
            if ( $('#AppContainer').length == 0 ){
                // Add new div container to the app and assign it to the 'el'
                view.el = $('body').prepend('<div id="AppContainer"></div>');                   
            }
            // Return view to the route for rendering.      
            return routerView;
        },

The close function inside one of the views would look something like this:

close: function(){
    //Deal with any child views here as well.
    this.remove();
},

Finally, in the route where we'd call the newView function would look

admin: function(){
    // Call the newView function with a new instance of the AdminView and then assign it back        
    this.adminView = router.newView( new AdminView({ el : $("#AppContainer")} ));
    //Render the view
    this.adminView.render();

}, 

Answer 1

I have done some more work investigating the problem and I've discovered it. The problem was two fold but appeared on the same line of code.

view.el = $('body').prepend('<div id="AppContainer"></div>');   

I discovered on the backbone docs that you should use the setElement function to alter a view's element. This then transfers all bound events which now means they work.

I then discovered that $('body').prepend('<div id="AppContainer"></div>') would return a reference to body and not the new #AppContainer but it actually returns a reference to the body which meant that the content of view was being placed in the body.