Question

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

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

当前代码：

链接的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');
        }
    });

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

1 个答案: