jquery 在 bootstrap 中选择的弹出窗口不起作用

Question

我正在尝试运行 jquery 在 bootstrap 弹出窗口中进行选择，但是启动的选择下拉菜单不可点击。

这是我的代码：

html

<button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title" >Click to toggle popover</button>
<div style="display: none;" id="popovercontent">
<select class="chosen chzn-done">
        <option>Choose...</option>
        <option>jQuery</option>
        <option selected="selected">MooTools</option>
        <option>Prototype</option>
        <option>Dojo Toolkit</option>
    </select>
</div>

JS

$(document).ready(function(){

// init chosen
  var $chosen = $(".chosen").chosen();

// init popover
  var $popover = $('#popover').popover({  
            placement: 'bottom',
            html: true,
            content: function () {
                return $('#popovercontent').html();
            },
            title: function () {
                return $(this).data('title');
            },
  });

// on show popover
  $popover.on("show.bs.popover", function(e) {
    console.log('open popover');
    $chosen.trigger("chosen:updated");
    });

}); // document.ready

https://jsfiddle.net/gdtocsud/

类似问题（未回答）：Chosen in bootstrap popover not working?

谢谢

比约恩

Answer 1

您好，这是工作演示

https://jsfiddle.net/gdtocsud/2/

<div class="panel panel-default">
        <div class="panel-body">
           <div class="btn-group">
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
               <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>
             </button>
             <ul class="dropdown-menu" role="menu">
               <li><a href="#">Item 1</a></li>
               <li><a href="#">Another item</a></li>
               <li><a href="#">This is a longer item that will not fit properly</a></li>
             </ul>
           </div>
         </div>
      </div>

Answer 2

这是js代码：

 $(document).ready(function() {

  // init chosen
  //var $chosen = $(".chosen").chosen();

  // init popover
  var $popover = $('#popover').popover({
    placement: 'bottom',
    html: true,
    content: function() {
      return $('#popovercontent').html();
    },
    title: function() {
      return $(this).data('title');
    },
  });

  // on show popover
  $popover.on("shown.bs.popover", function(e) {
    $('.chzn-done').chosen();

  });
  $popover.on('hidden.bs.popover', function() {
    $('.chzn-done').chosen('destroy');
  });
}); // document.ready

对于工作代码：这里是fiddle link

与chosen with modal类似，chosen behavior需要在内容准备好后进行初始化，所以和modal事件类似，可以使用popover事件

Answer 3

试试这个，也许这会对你有所帮助

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css">  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css">  
<script>
$(document).ready(function() {
    var $popover = $('#popover').popover({
    placement: 'bottom',
    html: true,
    content: function() {
      return $('#popovercontent').html();
    },
    title: function() {
      return $(this).data('title');
    },
  });
  $popover.on("shown.bs.popover", function(e) {
    $('.chzn-done').chosen();
  });
  $popover.on('hidden.bs.popover', function() {
    $('.chzn-done').chosen('destroy');
  });
});
</script>
</head>
<body style="padding:25px">
<button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title">Click to toggle popover</button>
<div id="popovercontent" style='display:none'>
  <select class="chosen chosen-select chzn-done" >
    <option>Choose...</option>
    <option>jQuery</option>
    <option selected="selected">MooTools</option>
    <option>Prototype</option>
    <option>Dojo Toolkit</option>
  </select>
</div>


</body>
</html>

jquery 在 bootstrap 中选择的弹出窗口不起作用

jquery chosen in bootstrap popover not working

javascript

jquery

twitter-bootstrap

popover

jquery-chosen