Question

How come the event does fire when a button is clicked?

var test1 = new Test({ Name: "Test 1", id: 1 });
var test2 = new Test({ Name: "Test 2", id: 2 });
var test3 = new Test({ Name: "Test 3", id: 3 });
var tests = new TestCollection([test1, test2, test3]);

TestView = Backbone.View.extend({
    initialize: function () {
        this.render();
    },
    events:
    {
        "click .btn": "clickbtn"
    },
    render: function () {
        $("#tests_template").tmpl(tests.toJSON()).appendTo("#tests_list");
        this.delegateEvents();
        return this;
    },
    clickbtn: function () {
        alert('test');
    }
});

var testView = new TestView();

<script id="tests_template" type="text/x-jquery-tmpl">    
    <li> 
    <b>${Name}</b><input type="button" id="btn" value="click" class="btn"/>
    </li> 
</script>

<ul id="tests_list">
</ul>

Answer 1

the events declaration works with the el element of your view. right now, you have your code directly appending the html output to something other than your view’s el.

this will fix it:

TestView = Backbone.View.extend({
    initialize: function () {
        this.el = $("#tests_list");
        this.render();
    },
    events:
    {
        "click .btn": "clickbtn"
    },
    render: function () {
        var html = $("#tests_template").tmpl(tests.toJSON());
        $(this.el).append(html)
        return this;
    },
    clickbtn: function () {
        alert('test');
    }
});