在单击具有动态内容的按钮时创建引导弹出窗口，并在再次单击时关闭

Question

我有一个页面，其中有一个 jquery 网格和一个带有和图标的链接。我需要显示一个弹出框并在弹出框内显示一个表单。但是当用户点击另一个链接（应该出现另一个弹出框）或页面上除弹出框之外的任何其他位置时，弹出框应该关闭。

我写的当前代码不起作用。

当前代码：

链接的HTML代码（这个div是网格中的一列，每一行的rowid都会不同）：

<div rowid="5" class="action-buttons">
    <a href="javascript:void(0);" class="blue editRow">
       <i class="icon-pencil bigger-130"></i>
    </a>
    <a href="javascript:void(0);" class="green markComplete">
       <i class="icon-check bigger-130"></i>
    </a>
</div>

Javascript 代码：

$('#grid-table').on('click','.editRow',function(e){
    $(this).popover({
        html: true,
        title: 'Popover Title<a class="close" href="#">&times;</a>',
        content: '<a>This one works fine!!</a>' //Content can change based on rowId
    });
    $(this).popover('show');
    e.stopPropagation();
    $('body').click(function (e) {
        if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
            $(this).popover('hide');
        }
    });
});

Answer 1

您应该在.editRow点击事件之外编写以下代码：

$('body').click(function (e) {
        if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
            $(this).popover('hide');
        }
    });