Backbone: Event lost in re-render

a playground setup with includes of backbone, jquery, underscore,...

by ismusidhu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<div id="composer">
    
</div>
<a href="#" onclick="window.view.delegateEvents();window.view.render();">Composer.render()</a>

CSS

body {
    font-family: sans-serif;
    font-size: 20px
}

#composer div {
    margin: 10px;
    background-color: #ccc;
    padding: 10px
}

JavaScript

var Composer = Backbone.View.extend({
    initialize: function(){
        this.i = 1;
    },
    events: {
        "click": "click"
    },
    
    click: function(){
        this.i++;
        if(this.i >= 6) {
            this.i = 1;
        }
        if(!this.img) {
        	this.img = this.$el.find('#abc');
        }
        var a = 'https://www.gstatic.com/webp/gallery/' + this.i + '.sm.jpg';
        this.img.attr('src', a);
    },
    
    render: function(){
        console.log( "Composer.render" );
        this.$el.html('<img id="abc" src="https://www.gstatic.com/webp/gallery/1.sm.jpg"/>');
        
        return this;
    }
});


window.view = new Composer({el: $('#composer')});
window.view.render();