CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrappopover
dapperdanman1400
dapperdanman1400

Reputation: 61

How to dismiss Bootstrap popover generated with dynamic content when click outside popover area

I'm trying to make a bootstrap popover hide when I click anywhere outside the actual popover. I've tried the solution in this thread:

How to dismiss a Twitter Bootstrap popover by clicking outside?

But it doesn't seem to work in my situation (it just prevents any popups from generating at all). I think it's because in my code, the links that generated the popups are dynamically added/deleted from the page, messing with the event listeners.

Here's my html:

       <div id="item-model">
            <div class="activity-col">
                <div class="form-group col-xs-5">
                    <select name="activity_x" id="activity-x" class="form-control">
                        <option value=""></option>
                        <option value="1">Item 1</option>
                        <option value="2">Item 2</option>
                    </select>
                </div>
            </div>
            <div class="vocab-col">
                <span class="vocab-setting">Random</span>
                <a href="#" class="glyphicon glyphicon-pencil edit-btn" title="" data-original-title="Edit"></a>
            </div>
            <div class="phonics-col">
                <span class="phonics-setting">Selected</span>
                <a href="#" class="glyphicon glyphicon-pencil edit-btn" title="" data-original-title="Edit"></a>
            </div>              
            <a href="#" class="glyphicon glyphicon-remove del-btn" title="" data-original-title="Remove" data-content="<button type='button' class='btn btn-primary'>Remove</button> <br /> <button type='button' class='btn btn-default'>Cancel</button>"></a>
        </div>
        <ol>
            <li>
                <div class="activity-col">
                    <div class="form-group col-xs-5">
                        <select name="activity_0" id="activity-0" class="form-control">
                            <option value=""></option>
                            <option value="1">Item 1</option>
                            <option value="2">Item 2</option>
                        </select>
                    </div>
                </div>
                <div class="vocab-col">
                    <span class="vocab-setting">Random</span>
                    <a href="#" class="glyphicon glyphicon-pencil edit-btn" title="" data-original-title="Edit"></a>
                </div>
                <div class="phonics-col">
                    <span class="phonics-setting">Selected</span>
                    <a href="#" class="glyphicon glyphicon-pencil edit-btn" title="" data-original-title="Edit"></a>
                </div>
            </li>
        </ol>

And javascript:

/* popover generation
--------------------*/
$('body').popover({
    html: true,
    placement: 'top',
    selector: '.del-btn',
});

/* make new list item
--------------------*/
$('.lesson.new ol').on('change blur', 'select:last', function() {
    var $last_select = $(this);
    if($last_select[0].selectedIndex !== 0) {
        var $ol = $('.lesson.new ol');
        var $li_content = $('#item-model').clone();
        $ol.append('<li></li>');
        var $last_li = $ol.children('li:last');
        $last_li.css({ opacity: 0 });
        $last_li.append($li_content.html());
        $last_li.animate({opacity : 1 }, { duration: 300 });
    }
});

What happens now is that when you select an item in the last selectbox of the list it automatically generates a new list item at the bottom. When you click the delete button (.del-btn), a popup comes up to confirm. What I want to happen is if you click outside the popup window, I want the current open popup window to hide. If you click another delete button while a popup is still open, the first popup window should close and the new one open.

Upvotes: 0

Views: 1543

Answers (2)

qwetty
qwetty

Reputation: 1268

Just now I read great article why event.stopPropagation() should never be used. It's worth reading.

Upvotes: -1

jme11
jme11

Reputation: 17397

This should do it for you. Comments should explain how it works.

//register an event handler for the entire body of the document

$('body').click(function (event) {
    //find the element that dispatched the event
    var clicktarget = $(event.target);
    //make sure that the element that dispatched the event was NOT the .del-btn
    if (!clicktarget.hasClass('del-btn')) {
        //if ANY element on the body dispatched the event other than the .del-btn
        //hide any open popovers
        $('.del-btn').popover('hide');
    }
});

Upvotes: 1

Related Questions