calling oneview to another view in backbone js view is not appearing

Question

i have problem in home view to call new view , when i am calling another view inside the homeview. firstview not rendering . and big problem here that event is working !! but if call the first view then view is not coming.the problem exactly in events and render template??

homeview

define(['jquery', 'underscore', 'backbone', 'views/top/TopbarpageView', 'views/home/firstView', 'text!templates/home/homeTemplate.html', 'fastclick', 'jmtouch'], function($, _, Backbone, TopbarpageView, firstView, homeTemplate) {
    var HomeView = Backbone.View.extend({
        el: $("#page"),
        events: {
            'click button#openEssay': 'openEssay'
        },
        render: function() {
            $('.menu li').removeClass('active');
            $('.menu li a[href="#"]').parent().addClass('active');
            this.$el.html(homeTemplate);
            var topbarpageView = new TopbarpageView();
            topbarpageView.render();
        },
        openEssay: function() {
            console.log("yyyyyyyyyyyyyy");
            var firstView1 = new firstView();
            firstView1.render();
        }
    });
    return HomeView;
});

homeTemplate

<div class="main">
    <div class="container">
        <h5>home page</h5>

        <p><button class='button' id='openEssay'>test</button></p>
    </div>
</div> 

Here am getting console (yyyyyy )value .but first view not appearing.

firstview

define(['jquery', 'underscore', 'backbone', 'text!templates/home/firstTemplate.html', 'fastclick', 'jmtouch'], function($, _, Backbone, firstTemplate) {
    var firstView = Backbone.View.extend({
        el: $("#page"),
        template: _.template(firstTemplate),
        events: {
            "touchstart #invitefriend": "invitefriendAction",
        },
        initialize: function() {
            console.log(" came in this view");
            this.render();
        },
        render: function() {
        console.log("firstview");
            this.$el.html(this.template());
        },
        return firstView;
    });

firstTemplate

<div class="main">
    <div class="container">
        <h2>new page</h2>
    </div>
</div> 

Answer 1

home view

events: {
            'click #openEssay': 'openEssay'
        },

and

openEssay: function() {
            console.log("yyyyyyyyyyyyyy");
            var firstView1 = new firstView();
            firstView1.render();

first view

 define(['jquery', 'underscore', 'backbone', 'text!templates/home/firstTemplate.html', 'fastclick', 'jmtouch'], function($, _, Backbone, firstTemplate) {
        var firstView = Backbone.View.extend({
            el: $("#content"),

            events: {
                "touchstart #invitefriend": "invitefriendAction",
            },
            initialize: function() {
                console.log(" came in this view");
                this.render();
            },
            render: function() {
            console.log("firstview");

var urTemplate = _.template( firstTemplate);
                                               this.$el.html(urTemplate);
                this.$el.html(this.template());
            },
            return firstView;


        });

firstTemplate

<div id ="content">
<div class="main">
    <div class="container">
        <h2>new page</h2>
    </div>
</div> 
</div>