Search code examples
jquerytwitter-bootstrappopover

Hiding Bootstrap popover with form

i have a problem. In my website is bootstrap popover with select box. I need when I click around popover, must hide it. I solved this problem, but when i closed popover for reoponening must be double click to button. This is bad. This is my code:

<a href="#" id="changeStatusLink" type="button" 
class="pull-right" data-container="body" data-toggle="popover" 
data-placement="bottom" data-original-title="" data-html="true" 
style="margin-right: 0"><span class="glyphicon glyphicon-pencil"></span></a>

Popover content:

<div id="changeStatusPopover" class="hide"><form>...</form></div>

JS:

$('#changeStatusLink').popover({
   html: true,
   content: function () {
       return $('#changeStatusPopover').html();
   }
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 
           && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Thanks for help

Solution

  • Updated your jsfiddle : http://jsfiddle.net/z824fn6b/315/

    it's workng for me now.

    I have just added a container : 

    <div class="container">