Backbone.Js events from subview doesn't fire

Question

I'm new to BackboneJs. And I really don't know what hell I'm doing wrong, but the events from my subview doesn't fire. I've been stuck with this problem now a long time, and I've used the google and stackoverflow to find a solution to my problem but I'm still confused. Could someone help\guide me?

var ExerciseList = Backbone.Collection.extend();
var ExerciseView = Backbone.View.extend({

    events : {
        'click' : "clickFun"
    },

    clickFun : function(e) {
        alert("yamaha");
    },

    render : function() {
        var exerciseList = new ExerciseList();
        exerciseList.url = '/api/exercise_bank/' + this.id + '/';
        var that = this;
        var element = this.$el;
        exerciseList.fetch({
            success : function() {
                var template = _.template($('#exercise-bank-template-exercises').html(), {exercises : exerciseList.models});
                $(element).html(template);
            }
        });
        return this;
    },
});

// Collection
var MuscleGroupList = Backbone.Collection.extend({
    url : '/api/exercise_bank/'
});

// View
var MuscleGroupView = Backbone.View.extend({
    el : '#exercise-bank-component',

    initialize : function() {
        this.exerciseList = new ExerciseList();
        this.exerciseView = new ExerciseView();
    },

    render : function() {
        var muscleGroupList = new MuscleGroupList();
        that = this;

        console.log('MuscleGroup.render');

        muscleGroupList.fetch({
            success : function(muscleGroupList) {
                template = _.template($('#exercise-bank-template-musclegroups').html(), {
                    musclegroups : muscleGroupList.models
                });
                that.$el.html(template);

                _.each(muscleGroupList.models, function(musclegroup) {
                    var element = "#eb-exercises-" + musclegroup.get('id');

                    that.exerciseList.id = musclegroup.get('id');
                    that.exerciseView.id = musclegroup.get('id');

                    that.exerciseView.setElement(element).render();
                    return that;
                });
            }
        });
        return this;
    },
});

muscleGroupView = new MuscleGroupView();
exerciseView = new ExerciseView();

muscleGroupView.render();

Backbone.history.start();

Answer 1

Solved it!

I just moved:

initialize : function() {
        this.exerciseList = new ExerciseList();
        this.exerciseView = new ExerciseView();
    },

down to:

_.each(muscleGroupList.models, function(musclegroup) {
     var element = "#eb-exercises-" + musclegroup.get('id');
     var exerciseList = new ExerciseList();
     var exerciseView = new ExerciseView();

     exerciseList.id = musclegroup.get('id');

     exerciseView.setElement(element).render();
     return that;
    });

and now it works as I want it to do! :)