jquery在bootstrap popover中選擇不起作用

我試圖在引導popover內部選擇運行jquery，但啓動的選定下拉列表不可用於點擊。jquery在bootstrap popover中選擇不起作用

這裏是我的代碼：

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>

$(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?

謝謝

比約恩·

來源

2016-12-20 Bjoern

這裏是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

對於工作代碼：這裏是需要

與模式選擇的行爲選擇類似初始化後的內容準備好，所以類似於模態的事件，您可以使用酥料餅事件

來源

2016-12-20 10:08:13 rahulsm

這也將解決您的問題搜索下拉元素。 – rahulsm

非常感謝你，這解決了我的問題。 – Bjoern

嗨這裏的工作演示

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>

來源

2016-12-20 09:21:03 Sharmila

我需要選擇的插件工作，包括搜索下拉元素。我有50多個元素的下拉菜單，需要搜索元素。您的解決方案不支持。 – Bjoern

試試這個，可能是這將幫助ü

<!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>

來源

2016-12-20 10:46:59

謝謝你，ganesh。 – Bjoern

jquery在bootstrap popover中選擇不起作用

回答

相關問題