Javascript 当单击popover区域外时，如何取消使用动态内容生成的引导popover

当我点击实际popover之外的任何地方时，我试图隐藏引导popover。我在这个线程中尝试了解决方案：

但在我的情况下，它似乎不起作用（它只是阻止任何弹出窗口的生成）。我认为这是因为在我的代码中，生成弹出窗口的链接是从页面中动态添加/删除的，会干扰事件侦听器

这是我的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>

项目1
项目2
随机的
挑选出来的

项目1
项目2
随机的
挑选出来的

和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 });
    }
});

/*popover生成
--------------------*/
$（'body'）.popover({
是的，
位置：'顶部'，
选择器：'.del btn'，
});
/*创建新的列表项
--------------------*/
$（'.lesson.new ol'）。在（'change blur'，'select:last'，function（）上{
var$last\u select=$（此）；
如果（$last_select[0]。selectedIndex！==0）{
var$ol=$（'.lesson.new ol'）；
var$li_content=$（“#项目模型”）.clone（）；
$ol.append（“
”）；
var$last_li=$ol.children（'li:last'）；
$last_li.css（{opacity:0}）；
$last_li.append（$li_content.html（））；
$last_li.animate（{不透明度：1}，{持续时间：300}）；
}
});

---

现在的情况是，当您在列表的最后一个选择框中选择一个项目时，它会自动在底部生成一个新的列表项目。当您单击删除按钮（.del btn）时，弹出窗口进行确认。我想发生的是，如果你在弹出窗口外单击，我想隐藏当前打开的弹出窗口。如果在弹出窗口仍处于打开状态时单击另一个删除按钮，则第一个弹出窗口应关闭，新窗口应打开。

刚才我读了一篇关于为什么

事件的精彩文章。永远不要使用stopPropagation（）

。这本书值得一读。

这本书应该适合你。评论应该解释它是如何工作的

//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');
    }
});

---

告诉我，你使用popover来确认删除操作吗？是的，这就是我要做的。对于这种行为，Modal更直观：）-jquery插件来显示Modal对话框或谢谢！读完那篇文章后，我选择了这篇文章的一个变体：　<代码>$（文档）.on（'click'，函数（事件）{if（！$（event.target）.最近（'menucontainer'）.length）{//隐藏菜单。}）