Backbone js view render click method not calling [Very Basic]

Question

I am a toddler to backbone js, born yesterday actually..

Following this tutorial - https://www.youtube.com/watch?v=_6pBvMK1Qgo

I am trying to execute this simple view code, but somehow the render method not getting called -

    <script type="text/javascript">
    model = Backbone.Model.extend ({
        data : [
            {text : "Google", href : "www.google.com"},
            {text : "Facebook", href : "www.facebook.com"}
        ]
    });

    var View = Backbone.View.extend({
        initialize : function () {
            console.log('Initializing...!!!');
            this.template = $('#list-template').children();
        },
        el : '#container',
        events : {
            'click' : 'render'
        },
        render : function () {
            console.log('button clicked');
            var data = this.model.get('data');
            for (i=0, j=data.length; i<j; i++) {
                var li = this.template.clone().find('a').attr('href', data[i].href).text(data[i].text).end();
                this.$el.find('ul').append(li);
            }
        }
    });

    var view = new View({model : model});
</script>
<div id="container">
    <button>Load</button>
    <ul id="list">
    </ul>
</div>

<div id="list-template">
    <li><a href=""></a></li>
</div>

Please let me know what stupid thing I am doing wrong.

Console log gives -

 Initializing...!!!

Answer 1

I found the issue. My script is above my DOM so render getting called before my DOM can initialize. I added jquery on ready and it is working now. Thanks