Backbone: View has lost contact to element
===

I have some sort of ViewCollection which renders all sub views.

    define(
        ['jquery', 'underscore', 'backbone', 'text!templates/main/layout.html', 'text!templates/main/index.html', 'views/security/login', 'views/security/registration'], 
        function($, _, Backbone, LayoutTemplate, ContentTemplate, LoginView, RegistrationView) {
    
        var IndexView = Backbone.View.extend({
    
            tagName: "div",
    
            className: "container",
    
            template: LayoutTemplate,
    
            render: function() {
                this.$el.html(LayoutTemplate);
    
                this.$('div.content').html(ContentTemplate);
                this.$('div.sidebar').append(new LoginView().render().el);
                this.$('div.sidebar').append(new RegistrationView().render().el);
    
                return this;
            }
    
        });
    
        return IndexView;
    
    });

This works quite good!
Unfortunatly I have noticed that for example the LoginView can't handle events anymore.


    define(
        ['jquery', 'underscore', 'backbone', 'text!templates/security/login.html'], 
        function($, _, Backbone, LoginTemplate){
    
        var LoginView = Backbone.View.extend({
    
            tagName: "form",
    
            className: "login well",
    
            template: LoginTemplate,
    
            events: {
                "submit form.login": "submit" 
            },
    
            render: function(){
                this.$el.html(this.template);
    
                return this;
            },
    
            submit: function(e){
                e.preventDefault();
    
                var credentials = {
                    'username': $(e.target[1]).val()
                    , 'password': $(e.target[2]).val()
                };
    
                console.log(JSON.stringify(credentials));
    
                $.ajax({
                    url: '/session'
                    , type: 'POST'
                    , contentType: 'application/json'
                    , data: JSON.stringify(credentials)
                    , success: function() {
                        window.Router.navigate('node', { trigger: true });
                    }
                    , error: function(xhr, status, error) {
                        console.log([xhr, status, error]);
                        $(e.target[1]).closest('div.control-group').addClass('error');
                        $(e.target[2]).closest('div.control-group').addClass('error');
                    }
                });
            }
        });
    
        return LoginView;
    
    });

Instead of sending an ajax call the browser tries to submit the form data url-encoded as GET request that is a sign that the view doesn't listen on any views anymore...

**Is there a option how I can rebind the view events to the element?**