隐藏的弹出框不会在第二次点击时触发答案

【问题标题】：Hidden popover does not fire on second click隐藏的弹出框不会在第二次点击时触发
【发布时间】：2015-10-19 14:26:19
【问题描述】：

我有这段代码，点击链接会弹出一个 Bootstrap 颜色选择器，然后选择不同的颜色会改变原始链接的颜色 + 将关闭颜色选择器。

但是，我第二次单击该链接时，颜色选择器不再触发，直到您再次单击第三次（我假设我没有正确隐藏弹出窗口并且在 Bootstrap 内的某个地方它仍然算作在打开状态）。

为什么会发生这种情况，有没有办法解决这个问题？

<a id="cp" href="#" data-toggle="popover" class="colourPicker" style="background-color:#20aaea" title="Highlight colour">Colour</a>

<div id="colour_picker" style="display: none">

<?php foreach(array('red', 'green', 'yellow', 'gray', 'orange') as $colour) { ?>

    <div style="cursor:pointer; background-color:<?php echo $colour; ?>" onClick="chooseColour('<?php echo $colour; ?>')"> <?php echo $colour; ?> </div>

<?php } ?>

<br/>
</div>



$('.colourPicker').popover({
    html : true,
    trigger: 'click',
    content: function(e) {

        return $('#colour_picker').html();
    }

});

function chooseColour(colour) {

    $('#cp').css('background-color', colour);
    $('.colourPicker').popover('hide');
}

【问题讨论】：

标签： jquery twitter-bootstrap popover

【解决方案1】：

试试下面的代码，

前几件事：

我建议你使用global范围来调用functionchooseColour

那么对于 popover 你必须手动触发点击事件，

这将使弹出框禁用点击，

那么然后手动调用$('.colourPicker').popover('show');

$(document).ready(function(e) {
    $('.colourPicker').popover({
        html: true,
        trigger: 'manual',
        content: function(e) {
            return $('#colour_picker').html();
        }
    }).click(function(e) {
        $('.colourPicker').popover('show');
    });

    window.chooseColour = function(colour) {
        $('#cp').css('background-color', colour);
        $('.colourPicker').popover('hide');
    }
});

【讨论】：