Closing Bootstrap 2 popover

Question

I have Bootstrap 2 app that displays a SVG, when I click on any path element I get the Bootstrap 2 popover as expected.

$('body').popover
    'selector': 'path'
    'container': 'body'
    'html': true
    'width': '360px'
    'title': () ->
        item = LOOKUP[this.id]
        '<a href="' + '/graphs.horizon/port/'+item['device']+'/'+item['physical_port'] + '">' + item['device'] + '/' + item['physical_port'] + '</a>' + '<button type="button" id="close" class="close">&times;</button>'
    'content': () ->
        this.id
        item = LOOKUP[this.id]
        url = '/graphs.horizon/utilisation/'+item['device']+'/'+item['physical_port']+'?layout=naked'
        '<iframe src="'+url+'" frameBorder="0" width="360px" height="180px"></iframe>'
    'trigger': 'click'
    'placement': 'right'

So I naively add a general click event like the following:

$(document).on 'click', '.popover .close', () ->
  console.log 'hello %o', $(this).parents('.popover')
  $(this).parents('.popover').popover('hide')

However, it doesn't seem to work. I get the debug hello message, however the .popover('hide') doesn't seem to do anything except print the debug message.

In the console I also try $('.popover').popover('hide') and that doesn't do anything either but using just the selector shows a list of the div objects as I would expect.

Answer 1

this worked:

$(document).on 'click', '.popover .close', () ->
  console.log 'hello %o', $(this).parents('.popover')
  $(this).parents('.popover').hide()