Question

我在.ashx文件中生成我的数据表：

(...)
//E.g. This is how I generate an icon which I put into one of the table cells
 comment = "<i class=\"fa fa-info\" id=\"popoverData\"aria-hidden=\"true\" data-placement=\"bottom\" data-original-title=\"Comments\" data-content=\"" + comments_text + "\"></i>";
(...)
var data = JsonConvert.SerializeObject(data);
var columns = JsonConvert.SerializeObject(columns);
context.Response.Write("{\"data\":" + data + ",\"columns\":" + columns + "}");

目标是在悬停在上面的图标上时显示引导弹出窗口。我的JavaScript：

    $(document).ready(function (){
       //this part should generate the bootstrap popover, but it's NOT
       $('#MyDataTable').on('mouseover', '#popoverData', function () {
         $('#popoverData').popover();
         //console log gets activated
         console.log("I am in the function");
     });
    getData();
    });

   function getData() {
     $('#MyDataTableDiv').html('<table id="MyDataTable" class="display" cellspacing="0" width="100%"></table>');

     $.ajax({
     "url": myUrl/getData.ashx',
     "success": function (json) {
        json.columnDefs = [
            { targets: '_all', defaultContent: "" },
            { targets: '_all', className: 'dt-body-left' }
        ];
        json.dom = 'Bfrtip';
        json.buttons = ['print', 'csv', 'copy'];

        $('#MyDataTable').dataTable(json);

    },
    "dataType": "json"
});
}

javascript mouseover事件被触发，但是popover无效。我也试过这个：

      $(document).ready(function (){
        $('#popoverData').popover();
        getData();
      });

但是在这种情况下，如果#popoverData元素在数据表之外，则弹出窗口仅显示。

如何在悬停在图标上时显示弹出窗口？

Answer 1

请修改您的代码。

   $('#MyDataTable').on('mouseover', '#popoverData', function () {
     $(this).popover('show');
 });

如果这不起作用，请尝试

$(document).on('mouseover', '#popoverData', function () {
$(this).popover('show'); 
});

将鼠标悬停在数据表中的图标上时显示popover

1 个答案: