将id添加到jquery popover的默认模板中

Question

我想创建一个弹出框，但我也想给它一个 id。我试图通过设置这样的模板来实现这一点。但是当我尝试显示弹出框时，出现以下错误

$("#myElement").popover({
            trigger: "manual",
            placement: placement,
            html: true,
            template: `<div id="` + id + `" class="popover fade bs-popover-end" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(788px, 615px);"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>`,
            customClass: customClass,
            content: content,
        })

错误：

Uncaught TypeError: Cannot read property 'remove' of null
    at Qe.getTipElement (popover.js:100)
    at Qe.show (tooltip.js:241)
    at HTMLImageElement.<anonymous> (popover.js:155)
    at Function.each (jquery.min.js:2)
    at S.fn.init.each (jquery.min.js:2)
    at S.fn.init.jQueryInterface [as popover] (popover.js:147)
    at PopoverList.Show (main.js:74)

Answer 1

这行得通。
您在模板中做了一个变量 id。
id 是从哪里来的？ 例如，我给了 id 值 1。

$(function() {
  $('#myelement').popover({
    trigger: 'manuel',
    placement: 'bottom',
    content: "And here's some amazing content. It's very engaging. Right?",
    title: "Popover title",
    html: true,
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
  })
  $('#myelement').on('shown.bs.popover', function() {
    console.log($(this).attr('aria-describedby'));
  })
})

<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.16.0/umd/popper.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<button type="button" id="myelement" class="btn btn-lg btn-danger">Click to toggle popover</button>