Question

不幸的是，当我点击表单html按钮（在弹出窗口内）时，我很难获得一个Bootstrap popover（在我的页面上的特定位置打开）。我知道有类似的问题，相信我，我已经尝试了一些相关的解决方案无济于事......

我有以下Javascript代码在我的页面上打开特定元素的Bootstrap popover：

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'); 

    }):

});

popover中按钮的关联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'); 

    }):

});

Answer 2

第一件事 - 错误：

在第三行末尾有一个冒号而不是分号最后，

这里

close.addEventListener("click", function(){

    event.preventDefault();

你忘了把'event'放在函数args中。

主要问题是：您过早地尝试分配事件处理程序'shown.bs.popover'。将其放入document.ready应该可以解决问题

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

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

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

$(function(){//<---ADD THIS
    // 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){

            event.preventDefault();

            console.log("close button clicked");          

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

        });

    });
});//<---ADD THIS

如果出于同样的原因使用setTimeout（如果$('#bob').popover()无效），请将其更改为document.ready阻止。不要依赖setTimeout。

如何通过单击弹出框中的按钮来关闭Bootstrap弹出框

2 个答案: