单击单击此处选项时，弹出框在动态表中不起作用答案

【问题标题】：Popover not working in dynamic table when click on click here option单击单击此处选项时，弹出框在动态表中不起作用
【发布时间】：2021-10-01 01:07:55
【问题描述】：

我在动态表上提供了弹出框选项，但弹出框无法正常工作。当我单击表头上的“单击此处”选项时，弹出窗口会出现，但它显示的尺寸非常小。我试图设置宽度，高度，但它不起作用。在弹出窗口中，必须有一个输入字段。

<table id="parent_table">
    <thead id="parent-header" >
    </thead>
    <tbody id="parent-table">
    </tbody>
</table>

var $parent_table = $('#parent_table');
var $parent_tableThead = $parent_table.find('#parent-header');
var $parent_tableTbody = $parent_table.find('#parent-table');

for (var i = 0; i < 4; i++) {
  $parent_tableThead.append('<th> column' + i + ' <span name="popover"> click here</span></th>');

}
var rowHtml;
for (var x = 0; x < 20; x++) {
  rowHtml = '<tr>';
  for (let z = 0; z < 4; z++) {
    if (z == 0) {
      rowHtml += '<td> A ' + x + '</td>';
    }
    else if (z == 1) {
      rowHtml += '<td> B' + x + '</td>';
    }
    else {
      rowHtml += '<td> ' + x + '</td>';
    }
  }
  rowHtml += '</tr>';
  $parent_tableTbody.append(rowHtml);
}

$(document).on('click', 'span[name="popover"]', function () {
  var content = " <div class='content'><div class='form-group'><input type='text' class='form-control' value='enter number'>" +
    "</div></div>" +
    "<div>Pin out</div>" +
    "<div id='hide'>Hide</div>" +
    "<div id='unhide'>UnHide</div>" +
    "<div>Search</div>"

  $(this).popover({
    html: true,
    content: content,
    placement: 'bottom',
    template: '<div class="popover" role="tooltip" style="width:230px;">' +
      '<div class="arrow"></div>' +
      '<h3 class="popover-title"></h3>' +
      '<div class="popover-content"></div>' +
      '</div>'
  }).popover('show');
});

【问题讨论】：

标签： javascript jquery html-table popup

【解决方案1】：

您可以只声明一个新的 CSS 类 .wide-popover {width: 250px;} 并在模板 <div class="popover wide-popover"> 中使用它。

const $parent_table = $('#parent_table');
const $parent_tableThead = $parent_table.find('#parent-header');
const $parent_tableTbody = $parent_table.find('#parent-table');

for (let i = 0; i < 4; i++) {
  $parent_tableThead.append('<th> column' + i + '<span name="popover"><button>click here</button></span> </th>');
}
let rowHtml;
for (let x = 0; x < 20; x++) {
  rowHtml = '<tr>';
  for (let z = 0; z < 4; z++) {
    if (z == 0) {
      rowHtml += '<td> A ' + x + '</td>';
    }
    else if (z == 1) {
      rowHtml += '<td> B' + x + '</td>';
    }
    else {
      rowHtml += '<td> ' + x + '</td>';
    }
  }
  rowHtml += '</tr>';
  $parent_tableTbody.append(rowHtml);
}

$(document).on('click', 'span[name="popover"]', function () {
  $(this).popover({
    html: true,
    title: 'Popover title',
    content: 'Popover content',
    placement: 'bottom',
    template: '<div class="popover wide-popover"><div class="arrow"></div>'+
              '<h3 class="popover-title"></h3><div class="popover-content">'+
              '</div></div>'
  }).popover('show')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.wide-popover {width: 250px;}
</style>
<table id="parent_table">
  <thead id="parent-header" >
  </thead>
  <tbody id="parent-table">
  </tbody>
</table>

或者，您可以使用 jQuery 在将 Popover 插入到 DOM 后更新其 CSS，如下所示。但是，请注意，通常不建议使用 JavaScript 操作样式。

$(this).popover({
    html: true,
    title: 'Popover title',
    content: 'Popover content',
    placement: 'bottom',
    template: '<div class="popover"><div class="arrow"></div>'+
              '<h3 class="popover-title"></h3><div class="popover-content">'+
              '</div></div>'
  }).popover('show')
$('.popover').css('width','250px');

【讨论】：