0

我有一个图标，如果您单击它，则会出现一个弹出窗口，其中包含一些从 Web 服务填充的数据。但问题是我希望弹出框在我单击它时出现，并且在我单击页面上的其他任何位置时消失！

你能告诉我我该怎么做吗？

PS：我已经尝试过 trigger:'manual' 但它不适用于我的示例！

我的代码在这里：

$('#myIcon').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax({
                type: "POST",
                url: "myURL"
            }).done(function (data) {                                           
                $this.popover({
                    placement:'bottom',                                        
                    content: function () {
                        html = "<table class='table table-bordered ' id='myTbl'><tbody id='myTblBody'>";
                        for (var i = 0; i < data.length; i++) {
                            html = html + "<tr><td>" + data[i]['username'] + "</td></tr>";
                        }
                        html = html + "</tbody></html>";
                        return html;
                    },
                    html: true,
                })
            });
});
4

2 回答 2

1

如果这对你有用，你可以试试。

当您显示弹出框时，将一次性单击侦听器添加到隐藏弹出框的整个主体。

$('#myIcon').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax({
                type: "POST",
                url: "myURL"
            }).done(function (data) {                                           
                $this.popover({
                    placement:'bottom',                                        
                    content: function () {
                        html = "<table class='table table-bordered ' id='myTbl'><tbody id='myTblBody'>";
                        for (var i = 0; i < data.length; i++) {
                            html = html + "<tr><td>" + data[i]['username'] + "</td></tr>";
                        }
                        html = html + "</tbody></html>";
                        return html;
                    },
                    html: true,
                });
                $('body').one('click',function(ev){
                    ev.preventDefault();
                    $this.popover('hide');
                });
            });
});
于 2013-07-24T14:46:04.850 回答
0

popover有一个名为 as 的方法，hideOnHTMLClick它说Hide popovers when clicked outside of them.

$('#myIcon').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax({
                type: "POST",
                url: "myURL"
            }).done(function (data) {                                           
                $this.popover({
                    placement:'bottom',
                    hideOnHTMLClick: true,                                        
                    content: function () {
                        html = "<table class='table table-bordered ' id='myTbl'><tbody id='myTblBody'>";
                        for (var i = 0; i < data.length; i++) {
                            html = html + "<tr><td>" + data[i]['username'] + "</td></tr>";
                        }
                        html = html + "</tbody></html>";
                        return html;
                    },
                    html: true,
                })
            });
});
于 2013-07-24T14:41:23.830 回答