Question

我有这个代码，点击链接会弹出一个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');
}

Answer 1

尝试以下代码，

前几件事：

我建议您使用global范围来调用function chooseColour

然后对于 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');
    }
});

第二次点击时隐藏的弹出窗口不会触发

1 个答案: