Backbone not binding events to jQuery Popover

Question

This question seems similar to those asked in a few other posts: here and here. I feel like I understand the concept, but I'm still having issues.

I am using the Twitter Bootstrap stuff for javascript popovers; the popover is where I want to bind events. The Bootstrap javascript inserts/removes the html each time you call .popover('show')/.popover('hide'). The events that are bound to the html inside of the popover do not get called. From what I read, Backbone uses jQuery.delegate() so it shouldn't matter if the html exists, but something is not working correctly

events:
    "click"             : "popover"
    "click .close"      : "close_popover"

Of these events, the first click event works but not the second (which is inside the popover).

popover: ->
  @el.popover('show')
  @delegateEvents(@events) #added from link

close_popover: ->
  @el.popover('hide')

Thanks.

Working on a jsFiddle that duplicates the problem. Added the code from the suggested link--still doesn't work.

Answer 1

You may be missing some indentations that are crucial when writing CoffeeScript:

Instead of

events:
"click"             : "popover" 
"click .close"      : "close_popover"

You want to indent the events

events:
    "click"        : "popover"
    "click .close" : "close_popover"

Without that indentation, the events become properties of the object, not of the "events" property and they will never be registered.

Answer 2

Your code looks fine. Can you confirm that an element with class close exists as a child of your view's el, and that it's what you're actually clicking on? (Try right-clicking on the element and inspecting it with Chrome Developer Tools or Firebug).