jquery - Bootstrap popover class not working properly on javascript generated content -

i want create select have fixed height (done) , show popover when hover on options.

first created select using plugin : http://silviomoreto.github.io/bootstrap-select/

that's working fine, , here's code far :

<select id="selectuse" class="form-control selectpicker" name="selectuse"                                     style="height: auto;">      <optgroup label="optgroup one">           <option value="value">option</option>           <option value="value">option</option>           <option value="value">option</option>           <option value="value">option</option>           <option value="value">option</option>           <option value="value">option</option>           <option value="value">option</option>           <option value="value">option</option>           <option value="value">option</option>      </optgroup> 

that's working fine.

then want add popover class on bootstrap : http://getbootstrap.com/javascript/#popovers

so here's had in jquery :

$(document).ready(function() {     $('.selectpicker').selectpicker({         size: 10,         dropupauto: false     });       $(document).on('mouseover','.popoverclass', function() {         $(this).popover();     });      $(document).on('mouseenter', 'li', function() {         $(this).addclass('popoverclass');         $(this).attr('data-toggle','popover');         $(this).attr('data-trigger','hover');         $(this).attr('data-content','test');         $(this).attr('tabindex','0');         $(this).attr('title','test');     });      $(document).on('mouseleave', 'li', function() {         $(this).removeclass('popoverclass');         $(this).removeattr('data-toggle');         $(this).removeattr('data-trigger');         $(this).removeattr('data-content');     });  }); 

now working. can see popover on edge of select small window that's been opened when hover on li element second time , think that's because activate popover(); when mouse enters li has .popoverclass, won't happen first time (since when adds .popoverclass), obviously. have no idea how access delegated element without event.

also, can see popover on edge of select small window, , i'd change style of this. have no idea how it, since generates div via javascript, , don't know how control it.

can me ?

thanks.

you need rebind event handler. use delegate() don't have (if have wrote original function), since you're using lib, rebind handler on element after it's created on page.. like

$('.popover-class').popover({ ... }); 

in callback after dynamically create content.