javascript - 如何通过单击弹出框本身内的按钮来关闭 Bootstrap 弹出框

Question

不幸的是，当单击表单 html 按钮(在弹出框本身内)时，我正在努力关闭 Bootstrap 弹出框(在我的页面上的特定位置打开)。我知道有类似的问题，相信我，我已经尝试了一些相关的解决方案但无济于事......

我有以下 Javascript 代码，用于在我的页面上的特定元素处打开 Bootstrap 弹出窗口:

setTimeout(function(){$('#bob').popover({

    title:"Reaction",
    html:true,
    content:html

}).popover('show')}, 1000);

// If a popover is open then can execute the following Javascript. Need to detect also which step clicked on...
$('#bob').on('shown.bs.popover', function () {            

    var close =  document.getElementById("yes");

    // if close button is clicked...
    close.addEventListener("click", function(){

        event.preventDefault();

        console.log("close button clicked");          

        $('#bob').popover('hide'); 

    }):

});

弹出框内按钮的关联 html 如下:

<button id ="yes" data-toggle="clickover" class = "btn btn-small btn-primary pull-right">Yes</button>

不幸的是，上面的方法不起作用。

我还查看了此问题的其他答案/解决方案，并尝试了以下方法但无济于事:

<button id ="yes" data-toggle="clickover" class = "btn btn-small btn-primary pull-right" onclick="event.preventDefault(); $(&quot;id&quot;).popover(&quot;hide&quot;);">Yes</button>

如果有人能给我一些线索/提示，让我知道如何让它发挥作用，我将不胜感激。

亲切的问候

Answer 1

代码本身有错误。您忘记在 id 选择器之前添加 #

//如果弹出窗口打开则可以执行以下 Javascript。还需要检测点击了哪个步骤...

$("#"+id).on('shown.bs.popover', function () {            

   var close =  document.getElementById("yes");

   // if close button is clicked...
   close.addEventListener("click", function(){

       event.preventDefault();

       console.log("close button clicked");          


       $("#"+id).popover('hide'); 

    }):

});