title: Backbone.js marionette ItemView click event not working
body: <p>I <strong>have been</strong> able to get events to fire in my marionette controllers like so:</p>
  
  <pre><code> ...snip...
   var Controller = {};
  
  _.extend(Controller, Backbone.Events);
  
  // private
  var Layout = Marionette.Layout.extend({
      template: _.template(layout),
  
      regions: {
          inspectorStart: "#inspector_start",
          loginStart:     "#login_start",
          playerStart:    "#player_start"
      }
  
  
  });
  
  // private
  var _initializeLayout = function() {
      console.log('initialize Start Layout...');
      Controller.layout = new Layout();
      Controller.layout.on('show', function() {       **// This works**
          Controller.trigger('startLayout:rendered'); **// This works**
      });
      vent.trigger('app:show', Controller.layout); **// This works**
  
  };
  
  
  // Listen for events ///////////////////////////////////////////
  // controller attach a sub view
  Controller.on("startLayout:rendered", function() {  **// This works**
      console.log('startLayout:rendered =&gt;StartController'); **// This works**
      // render views for the existing HTML in the template,...
      var inspectorStartView = new InspectorStartView();
      //  and attach it to the layout (i.e. don't double render)
      Controller.layout.inspectorStart.attachView(inspectorStartView);
      Controller.trigger('inspectorStart:show', inspectorStartView); **// This works**
  ...snip...
  </code></pre>
  
  <p>However, when I try to use the extended marionette ItemView I can't get events or triggers to work.</p>
  
  <pre><code>// views/InspectorStartView.js
  // -------
  define(["jquery", "marionette", "text!templates/InspectorStart.html"],
  
  function($, marionette, template){
  
      var InspectorStartView = marionette.ItemView.extend({
         template: template,
  
          events: {
              'click .starting_thumbnail' : 'start'
              //'click #inspectorStart' : 'start' **// didn't work either**
          },
          //I had also tried triggers
          triggers: {
              //'click .starting_thumbnail' : 'inspectorStart:start'
              'click #inspectorStart' : 'inspectorStart:start' **// didn't work either**
          },
  
  
          start:function (){  **// Doesn't get called**
              console("Caught InspectorStartView click")
              this.trigger("inspectorStart:start")
          }
  
      });
  
      // Returns the View class
      return InspectorStartView;
  });
  </code></pre>
  
  <p>Here is the template:</p>
  
  <pre><code>&lt;!-- InspectorStart.html --&gt;
  &lt;div id="inspectorStart" class="thumbnail starting_thumbnail"&gt;
  &lt;img src="/img/detective-97715888.jpg" alt="Inspector" width="200px" height="300px"&gt;
  &lt;div class="caption"&gt;
      &lt;h3&gt;Inspectors Enter Here&lt;/h3&gt;
      &lt;p&gt;Den Masters, Teachers, Parents, House Mothers, this is where you start.&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I did have to create the starting_thumbnail class so that I would get a pointer:</p>
  
  <pre><code>.starting_thumbnail{
  cursor: pointer;
  }
  </code></pre>
  
  <p>Do I need to do something else to make a div clickable?</p>
  
  <p>On my first attempt I passed in App.vent and tried to use it to no avail now I'm extending the Controller {} with _.extend(Controller, Backbone.Events);</p>
  
  <p>Following some debugging advice from @Ingro I logged what this.$el id for the ItemView.  This:
      console.log(["InspectorStartView initalise ",this.$el])</p>
  
  <p>Here is the output.  There is nodeName: "DIV" and the localName is div.</p>
  
  <pre><code>["InspectorStartView initalise ", jQuery.fn.jQuery.init[1]]
  0: "InspectorStartView initalise "
  1: jQuery.fn.jQuery.init[1]
  0: div
  accessKey: ""
  align: ""
  attributes: NamedNodeMap
  baseURI: "http://localhost:8001/index.html"
  childElementCount: 1
  childNodes: NodeList[3]
  children: HTMLCollection[1]
  classList: DOMTokenList
  className: ""
  clientHeight: 496
  clientLeft: 0
  clientTop: 0
  clientWidth: 300
  contentEditable: "inherit"
  dataset: DOMStringMap
  dir: ""
  draggable: false
  firstChild: #comment
  firstElementChild: div#inspectorStart.thumbnail starting_thumbnail
  hidden: false
  id: ""
  innerHTML: "&lt;!-- InspectorStart.html --&gt;↵&lt;div id="inspectorStart" class="thumbnail starting_thumbnail"&gt;↵    &lt;img src="/img/detective-97715888.jpg" alt="Inspector" width="200px" height="300px"&gt;↵   &lt;div class="caption"&gt;↵      &lt;h3&gt;Inspectors Enter Here&lt;/h3&gt;↵     &lt;p&gt;Den Masters, Teachers, Parents, House Mothers, this is where you start.&lt;/p&gt;↵ &lt;/div&gt;↵&lt;/div&gt;"
  innerText: "↵Inspectors Enter Here↵Den Masters, Teachers, Parents, House Mothers, this is where you start.↵↵"
  isContentEditable: false
  lang: ""
  lastChild: div#inspectorStart.thumbnail starting_thumbnail
  lastElementChild: div#inspectorStart.thumbnail starting_thumbnail
  localName: "div"
  namespaceURI: "http://www.w3.org/1999/xhtml"
  nextElementSibling: null
  nextSibling: null
  nodeName: "DIV"
  nodeType: 1
  nodeValue: null
  offsetHeight: 496
  offsetLeft: 621
  offsetParent: body
  offsetTop: 388
  offsetWidth: 300
  
  &lt;!-- all the on&lt;eventname&gt; were null --&gt;
  
  outerHTML: "&lt;div&gt;&lt;!-- InspectorStart.html --&gt;↵&lt;div id="inspectorStart" class="thumbnail starting_thumbnail"&gt;...snip..."
  ownerDocument: #document
  parentElement: li#inspector_start.span4
  parentNode: li#inspector_start.span4
  prefix: null
  previousElementSibling: null
  previousSibling: null
  scrollHeight: 496
  scrollLeft: 0
  scrollTop: 0
  scrollWidth: 300
  spellcheck: true
  style: CSSStyleDeclaration
  tabIndex: -1
  tagName: "DIV"
  </code></pre>
  
  <p>Of course above is inside the initialize method.  I wanted to see the difference after creating a 'new' one:</p>
  
  <pre><code>/ controller show inspector in the layout / subview
  Controller.on('inspectorStart:show', function(inspectorStartView) {
      console.log('show inspector start view');
      console.log(**'InspectorVartView instance this.$el : ', inspectorStartView.el**);
      Controller.layout.inspectorStart.show(inspectorStartView);
  });
  </code></pre>
  
  <p>The output is much smaller:</p>
  
  <pre><code>InspectorVartView instance this.$el :  
  &lt;div&gt;​
     &lt;!-- InspectorStart.html --&gt;
     &lt;div id=​"inspectorStart" class=​"thumbnail starting_thumbnail"&gt;​…​&lt;/div&gt;​
  &lt;/div&gt;​
  </code></pre>
  
  <p>@Ingro that is wrapped in a div why would that matter?</p>
  
  <p>Does anyone see what I'm doing incorrectly?  </p>
  
  <p>Thanks,</p>
  
  <p>Andrew <a href="http://jsfiddle.net/KingAndrew/SeDeL" rel="nofollow">jsFiddle</a>(see comments below)</p>