隱藏的彈窗不會觸發第二次點擊

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