Question

Just getting started here and cannot seem to get this very basic thing working. All my elements render as I expect. My events register in firefox in the “events” tab, but none of them seem to fire (click, mouseover, etc). I am using the following.

• backbone 0.9.2
• underscore 1.4.1
• Marionette .10.2
• require-jquery (requireJs 2.1.0) (jquery 1.8.2)

Router

define([
'jquery',
'backbone',
'underscore',
'views/TodaysProgramsView',
'collections/ProgramSnippetCollection'],
function($, Backbone, _, TodaysProgramsView, ProgramSnippetCollection){
    return Backbone.Router.extend({
        initialize:function () {

            var programSnippetCollection = new ProgramSnippetCollection([
                {title:'underwater basket weaving'},
                {title:'How to win friends and influence people and stuff'}
            ]);

            this.mainView = new TodaysProgramsView({
                el : $("#todays_programs"),
                collection:programSnippetCollection
            });

            Backbone.history.start();
        },
        routes:{
            '':'home'
        },
        'home':function () {
            this.mainView.render();
        }
    });
});

Collection View [TodaysProgramsView.js]

define([
'jquery',
'backbone',
'underscore',
'views/ProgramSnippetView'],
function($, Backbone, _, ProgramSnippetView){
    return  Backbone.Marionette.CollectionView.extend({

        events: {
            "click"   : "clicked"

        },
        clicked : function(){
            alert("parent clicked")
        },

       itemView : ProgramSnippetView
    });
});

Item View [ProgramSnippetView.js]

define([
'jquery',
'backbone',
'underscore',
'text!templates/programSnippet.html'],
function($, Backbone, _, template){
    return Backbone.Marionette.ItemView.extend({


        events: {
            "click"   : "courseClicked",
            'mouseover' : 'mousedOver'
        },

        render: function(){

            var json = this.model.toJSON();
            console.log("RENDERING SNIPPET with data", json);
            $(this.el).html( _.template(template, json) );
            return this;
        },

        courseClicked : function(){
            alert("you clicked a course, good work");
        },

        mousedOver : function(){
            console.log("Mousin!");
        }
    });


});

Answer 1

After much frustration and many hours of javascript tweaking, I noticed that there was a div set with a z-index to 2. This was overlaying my target and gobbling up all the events. Sigh.