CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapbuttonpopover
triplethreat77
triplethreat77

Reputation: 1296

Close Bootstrap popover within actual popover?

I am using a Twitter Bootstrap popover for a kind of alert confirmation for deleting specific table rows, and can't seem to get the buttons within the popover to affect anything. I have copied the exact "Cancel" button outside the popover and it works fine. http://jsfiddle.net/UK7BE/1/

HTML

<span class="glyphicon glyphicon-trash icon-set delLtBlue delPop" title='Delete' 
          data-content="
            <div style='font-size: 14px; color: #000000; font-weight:bold'>
              <span class='icon-warning-2'></span>&nbsp;Are you sure you want to delete the selected row?<br/><br/>
            </div>  
            <input type='button' value='Cancel' class='greenBtn cancelPop' />&nbsp;<input type='button' value='Delete' class='greenBtn' id='delete' />
          " title="Delete"></span>&nbsp;

jQuery

$('.delPop').popover({
              placement:'bottom',
              html : true,
          });
          $("input[type=button].cancelPop").on('click',function(){
            $(".delPop").popover('hide');
          });

Any ideas? Thanks in advance.

Upvotes: 1

Views: 899

Answers (1)

PSL
PSL

Reputation: 123739

Issue is that when you use bootstrap popover with html content it actually clones the content in data-content inside the popover div. So it means that event registered o the original cancel doesn't apply in the new cancel button created in the popover, since this data-content's content is just attribute values and not real element in DOM. So you can use event delegation to bind the click event to document (since it is at the root level) to have it delegated the cancel button.

$(document).on('click',"input[type=button].cancelPop", function () {
    $(".delPop").popover('hide');
});

fiddle

But hold on. You don't need to place the popover content this way. You can instead place the html as is on the page hiding them.

Better yet: separate you popover content to a different hidden element rather than placing the whole html in an attribute.

<span class="glyphicon glyphicon-trash icon-set delLtBlue delPop" title='Delete'></span> &nbsp;
<div class="popOverContent">
    <div style='font-size: 14px; color: #000000; font-weight:bold'>
<span class='icon-warning-2'></span>&nbsp;Are you sure you want to delete the selected row?
        <br/>
        <br/>
    </div>
    <input type='button' value='Cancel' class='greenBtn cancelPop' />&nbsp;
    <input type='button' value='Delete' class='greenBtn' id='delete' />
</div>

and apply:

$(function () {
     $(document).on('click', "input[type=button].cancelPop", function () {
        $(".delPop").popover('hide');
    });

    $('.delPop').popover({
        placement: 'bottom',
        html: true,
        content: function () {
            return $('.popOverContent').html();
        }
    });

});

Fiddle

Upvotes: 2

Related Questions