将属性设置为按钮，但仅在我单击它两次时才有效

Question

我已经用一些 bootstrap 元素为我的按钮设置了一些属性，但是当我第一次点击按钮时它不起作用。我需要点击按钮外的某处，然后再次点击按钮。

我已经通过调用 onload 中的函数并在按钮中再次调用它来解决这个问题，但现在我无法再这样做了，所以我想知道是否有其他方法可以解决问题？

这是我的代码： https://jsfiddle.net/a22177861/x381z0h6/6/

HTML:

 <button type="button" class="btn btn-warning" onclick="PopOver(this,'Hi','Thank','You');">ClickMe！</button>

JS:

function PopOver(myObj, mgr, Adate, Vdate) {
        $(function () {
            myObj.setAttribute("data-container", "body");
            myObj.setAttribute("data-toggle", "popover");
            myObj.setAttribute("data-placement", "bottom");
            myObj.setAttribute("data-html", "true");
            myObj.setAttribute("data-trigger", "focus");
            myObj.setAttribute("title", "otherInfo");
            myObj.setAttribute('data-content', "MGR："+mgr+"<br />DATE1："+Adate+"<br />DATE2："+Vdate);

            $("[data-toggle='popover']").popover();
        });
    }

如有任何帮助，我们将不胜感激！

Answer 1

您代码中的这个 $('[data-toggle="popover"]').popover() 会初始化弹出窗口，因此您必须单击两次才能触发它。

根据Bootstrap的popover documentation：

Reveals an element’s popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover event occurs). This is considered a “manual” triggering of the popover. Popovers whose both title and content are zero-length are never displayed.

您可以使用.popover('show')手动触发弹窗。

会变成这样：

function PopOver(myObj, mgr, Adate, Vdate) {
  myObj.setAttribute("data-container", "body");
  myObj.setAttribute("data-toggle", "popover");
  myObj.setAttribute("data-placement", "bottom");
  myObj.setAttribute("data-html", "true");
  myObj.setAttribute("data-trigger", "focus");
  myObj.setAttribute("title", "otherInfo");
  myObj.setAttribute('data-content', "MGR："+mgr+"<br />DATE1："+Adate+"<br />DATE2："+Vdate);

  $("[data-toggle='popover']").popover('show');
}

Answer 2

我建议您以更友好的方式编写代码。有些死字段可以直接写成HTML

    <button type="button" class="btn btn-warning" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-html="true" title='otherInfo' onclick="PopOver(this,'Hi','Thank','You');">ClickMe！</button>

function PopOver(myObj, mgr, Adate, Vdate) {
  myObj.setAttribute('data-content', "MGR："+mgr+"<br />DATE1："+Adate+"<br />DATE2："+Vdate);
  $("[data-toggle='popover']").popover('show');
}

将属性设置为按钮，但仅在我单击它两次时才有效

Set attributes to the button but only works when I click it twice

javascript

bootstrap-4