如何在嵌套的jquery数据表中打开一个bootstrap popover？

Question

我在cshtml页面中有一个嵌套的jquery数据表。

下面是我的嵌套jquery数据表的javascript代码，

$(document).ready(function () {
    var table = $('#products').DataTable({
       "columnDefs": [
            { "width": "25%", "targets": 1 }
       ],
       "searching": false,
       "ordering": false,
       "scrollX": true
});

$('#products tbody').on('click', 'td.details-control', function () {
     var tr = $(this).closest('tr');
     var row = table.row(tr);
     if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
     } else {
        format(row.child, row.data()[0]);
        tr.addClass('shown');
     }
});

 function format(callback, productId) {
     var url = "/Products/GetProductDetails/";
     $.ajax({
         url: url,
         data: { ProductId: productId },
         dataType: "json",
         complete: function (response) {
             var data = JSON.parse(response.responseText);
             var thead = '', tbody = '';
             thead += '<th> ProductId </th>' +
             '<th> Product Name </th>' +
             '<th> Price </th>' +
             '<th> Product Details </th>';
             $.each(data, function (i, d) {
                   tbody += '<tr><td>' + d.ProductId + '</td><td>' + d.ProductName + '</td><td>' + d.Price
                   + '</td><td>' + '<button type="button" class="btn btn-info" data-toggle="popover" title="Details" data-content=" ' + d.ProductDetails + ' ">Product Details</button>'
                   + '</td></tr>';
             });
             callback($('<table class="table table-striped table-bordered table-hover" width="80%">' + thead + tbody + '</table>')).show();
          },
          error: function () {
               $('#output').html('Please try again.');
          }
      });
   }
});

如果我在父html表中使用它，但它在javascript中的子html表中不起作用，它可以工作。