jquery in Bootstrap Popover nicht funktioniert

Ich versuche, Jquery in einem Bootstrap-Popover gewählt, aber das initiierte gewählte Dropdown ist nicht anklickbar.jquery in Bootstrap Popover nicht funktioniert

Hier ist mein Code:

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/

ähnliche Frage (nicht beantwortet): Chosen in bootstrap popover not working?

danke

Bjoern

Quelle

2016-12-20 Bjoern

Hier wird der js Code:

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

Für Arbeitscode: Hier ist fiddle link

Ähnliche mit modalen der gewählten Verhalten gewählt muss initialisiert werden, nachdem der Inhalt bereit ist, so ähnliche Ereignisse modal, können Sie die popover Ereignisse

Quelle

2016-12-20 10:08:13 rahulsm

Dies wird Ihr Problem mit der Suche nach den Dropdown-Elementen lösen. – rahulsm

Vielen Dank, das löst mein Problem. – Bjoern

Hallo hier ist die Arbeits Demo

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>

Quelle

2016-12-20 09:21:03 Sharmila

ich brauche das gewählte Plugin einschließlich Durchsuchen der Drop-down-Elemente zu arbeiten. Ich habe Dropdowns mit 50+ Elementen und muss nach einem Element suchen. Ihre Lösung unterstützt das nicht. – Bjoern

versuchen, diese verwenden, kann dies u

helfen

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

Quelle

2016-12-20 10:46:59

danke auch, ganesh. – Bjoern

jquery in Bootstrap Popover nicht funktioniert

Antwort

Verwandte Themen