Backbone Dynamically created 'el' not binding events

Question

Like many other users out here I have a problem with el and events. In my situation I have tested multiple solutions including, using the default el (just <div></div>) setting tagName, setting el to a selector using a jQuery selector and waiting for the DOM to be ready. Each of these solutions have failed at binding the events and all but the default el and tagName have failed at generating html. Relevant code:

View

$ ->
   class Aggregator.Views.Streams.StreamView extends Backbone.View
      template:JST["backbone/templates/stream"]
      el: $('.item')
      events:
       "click div" : "testing"
      initialize: (model)->
       console.log @el
       _.bindAll this , 'render'
       @model.bind 'change', @render
       @model.view = @
       @render()
       @delegateEvents()
      render: ->
       $(@el).html  "test"
       console.log @el
       @
      testing: ->
       alert "EVENT"
       #@model.clear()

Function that calls view (extracted from another view)

view = new Aggregator.Views.Streams.StreamView({model: stream})
    console.log view.el
    $(@el).append view.render().el

I'm a bit confused, I have set el but it either doesn't create or it doesn't bind events. I've tried waiting for the DOM to load and passing el to the constructor but no success. Any help on my most likely obvious mistake would be appreciated.

Answer 1

Sorry i'm not comfortable with coffeescript, though i think i recognised your event hash

events: {
  "click div" : "testing"
}

and i bet you are trying to bind this testing function to the click on your general view element? there is the problem.

what your click event actually does (selector-wise) is:

$('div', viewElement).click(fn);

meaning, you don't target the viewElement div but div's INSIDE your view element.

if you want to bind to the general view element itself, define an event without a selector

in your case:

events: {
  "click" : "testing"
}