通过JQuery动态引用和更新弹出窗口标题/正文（使用Bootstrap 4）-并非按ID

Question

所以这是我正在使用的代码示例：

// Show popover
$("div.e").popover({
  selector: '.eqp',
  trigger: 'click',
  title: 'Loading...'
}).on('shown.bs.popover', function(e) {
  var popover_data_eid = $(e.target).data("eid");
  var bodyEl = $(".popover").find(".popover-body");
  var titleEl = $(".popover").find(".popover-header");
  // Show spinner while waiting for data to be fetched
  bodyEl.html("<div class='d-flex justify-content-center'><div class='spinner-border text-secondary' role='status'><span class='sr-only'>Loading...</span></div></div>");

  $.getJSON("http://ipinfo.io/" + popover_data_eid)
    .done(function(data) {
      var result = '';
      if (data.org) {
        result += data.org + '<br>';
      }
      if (data.city) {
        result += data.city + ', ';
      }

      if (data.region) {
        result += data.region + ' ';
      }
      if (data.country) {
        result += data.country;
      }
      if (result == '') {
        result = "No details found.";
      }
      bodyEl.html(result);
      titleEl.html("Further details");
    }).fail(function(data) {
      result = "No details found.";
      bodyEl.html(result);
    });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>




<br />
<div class="e" style="margin-left: 20px;">
  <a href="#" class="eqp" data-eid="141.101.1.19">Details (1)</a>
  <br />
  <br />
  <a href="#" class="eqp" data-eid="181.131.3.69">Details (2)</a>
  <br />
  <br />
  <a href="#" class="eqp" data-eid="121.161.3.63">Details (3)</a>
</div>

我可能在页面上有数百个潜在数据项要放置在弹出窗口中（如图所示动态生成，并且从未为弹出窗口指定ID。

我如何引用“ $（this）”弹出框，而不是像这样按类查找所有它们：

  var bodyEl = $(".popover").find(".popover-body");
  var titleEl = $(".popover").find(".popover-header");

提前感谢！

Answer 1

参考弹出框的“ tip”属性。像这样：

var popover = $(e.target).data('bs.popover');
var tip = $(popover.tip);

var bodyEl = tip.find(".popover-body");

然后您可以引用该特定弹出窗口。