2

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.

Community
  • 1
  • 1
camdub
  • 867
  • 1
  • 10
  • 22

2 Answers2

1

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).

Trevor Burnham
  • 76,828
  • 33
  • 160
  • 196
  • You are right. It's not part of the el. It works if I change the el reference. E.g. `popover: -> @el.popover('show') @el = $(".popover") @delegateEvents(@events)` but then I lose the binding to the element that calls the popover. In this [image](http://cl.ly/303b0Z0N3C2C0z3y2y24) you can see the popover and the calendar event. If I change the el, then after I close the popover, clicking on the element doesn't open it anymore. Would it make sense to reset the el back to the event element on close? – camdub Nov 03 '11 at 02:06
  • Yeah, you want `@el` to be fixed... instead, since you're binding to an event to an element outside of `@el`, you should do that binding from your `render` event. It should look something like: `$('.close').live 'click', -> ...`. – Trevor Burnham Nov 03 '11 at 03:14
  • Thanks. I am curious, what is wrong with changing `@el` in the view? – camdub Nov 04 '11 at 03:57
  • It's just confusing, that's all. There's nothing wrong with changing what `@el` points to, but there is something wrong when you as the programming don't know what it's pointing to at any given moment because it depends on some state somewhere. – Trevor Burnham Nov 04 '11 at 04:17
0

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.

Brian Genisio
  • 47,787
  • 16
  • 124
  • 167
  • 1
    If this was not the cause, check out these resources: http://stackoverflow.com/questions/7869820/i-cant-get-backbone-js-events-to-trigger-when-the-view-is-within-a-fancybox/7874926#7874926 http://backbonefu.com/2011/08/using-backbone-js-with-jquery-ui-modals/ – dira Nov 02 '11 at 16:34
  • ah, the indentation is my fault on entering the code to the post. In my code they are indented. Thanks! – camdub Nov 02 '11 at 18:08