using interactive elements inside a bootstrap popover

jquery, popover, twitter-bootstrap

Solution

The syntax changed. The answer of Kalin C Ringkvist needs to be slightly modified:

var popover = this.commentLink.data('popover').tip();

Note the method `tip()` instead of `$tip`.

Problem

I am successfully using a bootstrap popover on a link click. I have some form elements inside the popover: a textfield, checkbox and a button. I'm able to attach a button listener using jquery.live(), but inside that button listener I don't seem to have any access to the correct form elements. They exist if I trace them out in a console log, but their values always remain the original defaults, so if I go $('#txtComment').val(); the string is always the same, regardless of what I put into the field. Are there any examples, tutorials or source code I could look at of something that is using any kind of interactivity inside a bootstrap popover? this is how I'm setting up the popover: ``` this.commentLink.popover({ trigger: 'manual', placement: 'right', html : true, content: function () { return $('#commentPopout').html(); } }).popover('hide'); //jquery.on won't work here so we use live $('#btnSubmitComment').live('click', this.proxy(this.commentSubmitClick)); ``` then I'm doing this to successfully show it: ``` this.commentLink.popover('show'); ``` and this is the button click function: ``` commentSubmitClick: function(e){ console.log($('#txtComment').val());//always shows default text regardless of what I've actually typed in the field } ```

Original source