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

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范围调用functionchooseColour

那么对于酥料饼你必须手动触发点击事件,

这将使酥料饼禁用的点击，

因此然后调用$('.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'); 
    } 
});