Backbone.js change event not firing

Question

I have a lot of select boxes each having class as browse_select. I want to fire the render function whenever any option from those select boxes is changed but it didn't fire this function.

$(function(){
    var Users = Backbone.Collection.extend({
        url: "/app/phpscripts/services/browse_users/?"
    });

    var UserView = Backbone.View.extend({
        el: '.list_ctn ul',
        tagName: 'li',

        events: {
            "change .browse_select" : "render"
        },

        render: function(){
            console.log("render");
            var users = new Users();
            var that = this;
            users.fetch({
                success: function(){
                    var template = _.template($('#myUserTemp').html(),{users: users.models});
                    that.$el.html(template);
                }
            });
        }
    });

    var userView = new UserView();
    userView.render();
});

Answer 1

Double check that the select boxes are in #myUserTemp.

Also, you might want to put the user.fetch logic outside that view. Since its part of a callback I'm not sure if the event listeners can be properly set because of your flow.

I would suggest that you call fetch from outside the view, then when the fetch is successful initiate a new UserView and pass the collection. That allows you to set the _.template() in the standard way as well, as a view property.