When call View to another view backbone js events not working

Question

Whats the problem have to face calling view to another view?...when i call the menu view to home view. Menu view not rendering properly. and big problem here that events not working !! but if call the menu view individualy then works fine. i have question that whats the problem exacty in events and render template??

define([
  "jquery",
  "underscore",
  "backbone",
  "models/menu/MenuModel",
  "collections/menu/MenuCollections",
  "text!templates/menu/menuTemplate.html",
], function ($, _, Backbone, MenuModel, MenuCollections, menuTemplate) {

    var MenuView = Backbone.View.extend({       
        model: new MenuModel,  
        el:".sidebar_menu",    
        template: _.template(menuTemplate),
        events:{
            "click #sidebar .has-sub > a":"main_menu"
            },
        initialize:function(){         
             this.render();       
        },
        render: function () {                     
             this.$el.html(this.template());                            
          },
        main_menu:function(e){
            alert("rakib");
             var last = $('.has-sub.open', $('#sidebar'));
                last.removeClass("open");
                $('.arrow', last).removeClass("open");
                $('.sub', last).slideUp(200);
                var sub = $(e.target).next();
                if (sub.is(":visible")) {
                    $('.arrow', $(e.target)).removeClass("open");
                    $(e.target).parent().removeClass("open");
                    sub.slideUp(200);
                } else {
                    $('.arrow', jQuery(e.target)).addClass("open");
                    $(e.target).parent().addClass("open");
                    sub.slideDown(200);
                }

            }


    });

    return MenuView;

});

When i call menu view to home view..event is not working. whats the problem exactly ??

define([
  "jquery",
  "underscore",
  "backbone",
  "views/menu/MenuView",
  "models/home/HomeModel",
  "text!templates/home/homeTemplate.html",
], function ($, _, Backbone, MenuView, HomeModel, homeTemplate) {

    var HomeView = Backbone.View.extend({       
        model: new HomeModel,
        el: $("#container"),
        template: _.template(homeTemplate),

        initialize:function(){
          this.render();  
          this.menu_render();

        },
        render: function () {
            this.$el.html(this.template());
          },
        menu_render:function()
        {
          (new MenuView).render();  


        }



    });

    return HomeView;

});

Answer 1

Well, you need to add your new view inside an html element of your current view to display it. I would suggest to add your MenuView to an html element defined in your template file of your HomeView using an append function.

Like this:

$('#yourHomeViewHTMLElementDefinedInTemplate').append((new MenuView).render().el);

in your code try this:

    menu_render:function()
    {
      $("#container").append((new MenuView).render().el);
    }

I hope it helps.