How to bind bootstrap popover on dynamic elements

Question

I m using Twitter Bootstrap s popover on the dynamic list  The list item has a button  when I click the button  it should show up popover  It works fine when I tested on non-dynamic     this is my JavaScript for non-dynamic list     button rel popover    popover        placement    right       container    body       html   true        content    lt div style  color red  gt This is your div content lt  div gt       content  function           return     popover-content   html                       click function e            e preventDefault          However  It doesn t work well on dynamic list  It can show up when I click the button  twice  and only show up one of list items I click fist time    MY html      lt ul id  project-list  class  nav nav-list  gt      lt li class  project-name  gt        lt a  gt project name 1           lt button class  pop-function  rel  popover   gt  lt  button gt        lt  a gt      lt  li gt      lt li class  project-name  gt        lt a gt project name 2          lt button class  pop-function  rel  popover   gt  lt  button gt        lt  a gt      lt  li gt     lt  ul gt    lt div id  popover-content  style  display none  gt       lt button class  pop-sync  gt  lt  button gt       lt button class  pop-delete  gt  lt  button gt   lt  div gt    My JavaScript for dynamic     document  on  click     project-list li    function       var username     cookie  username       var projectName     this  text         li active   removeClass  active         this  addClass  active       console log  username     username     project name    projectName            document  on  click    button rel popover    function          this  popover           placement    right          container    body          html   true      content  function            return     popover-content   html                      click function e       e preventDefault                    for close other popover when one popover button click   document  on  click    button rel popover     function                button rel popover    not this  popover  hide           I have searched similar problems  but I still can t find the one to solve my problem   If anyone has some ideas  please let me know  Thanks your help

User · Answer

Try this HTML  lt a href  quot   quot  data-toggle  quot popover quot  data-popover-target  quot  popover-content-1 quot  gt Do Popover 1 lt  a gt   lt a href  quot   quot  data-toggle  quot popover quot  data-popover-target  quot  popover-content-2 quot  gt Do Popover lt  a gt    lt div id  quot popover-content-1 quot  style  quot display  none quot  gt Content 1 lt  div gt   lt div id  quot popover-content-2 quot  style  quot display  none quot  gt Content 2 lt  div gt   jQuery    function           data-toggle  quot popover quot     each function i  obj        var popover target     this  data  popover-target          this  popover           html  true          trigger   focus           placement   right           content  function obj                return   popover target  html

User · Answer

I did this and it works for me    content  is placesContent object  not the html content   var placesContent       placescontent        places   popover           trigger   click           placement   bottom           container   body           html   true          content   placesContent               places   on  shown bs popover   function          addPlaceBtn   on  click   addPlace          lt div id  placescontent  gt  lt div id  addPlaceBtn  gt Add lt  div gt  lt  div gt

User · Answer

Update If your popover is going to have a selector that is consistent then you can make use of selector property of popover constructor  var popOverSettings         placement   bottom       container   body       html  true      selector    rel  quot popover quot       Sepcify the selector here     content  function              return     popover-content   html                body   popover popOverSettings    Demo Other ways    Standard Way  Bind the popover again to the new items being inserted  Save the popoversettings in an external variable  Use Mutation Event Mutation Observer to identify if a particular element has been inserted on to the ul or an element   Source var popOverSettings       Save the setting for later use as well     placement   bottom       container   body       html  true        content  quot   lt div style  color red  gt This is your div content lt  div gt  quot      content  function              return     popover-content   html                 ul   on  DOMNodeInserted   function        listed for new items inserted onto ul       event target  popover popOverSettings           quot button rel popover  quot   popover popOverSettings       pop-Add   click function             ul   append  quot  lt li class  project-name  gt       lt a gt project name 2         lt button class  pop-function  rel  popover  gt  lt  button gt       lt  a gt     lt  li gt  quot         But it is not recommended to use DOMNodeInserted Mutation Event for performance issues as well as support  This has been deprecated as well  So your best bet would be to save the setting and bind after you update with new element  Demo Another recommended way is to use MutationObserver instead of MutationEvent according to MDN  but again support in some browsers are unknown and performance a concern  MutationObserver   window MutationObserver    window WebKitMutationObserver     create an observer instance var observer   new MutationObserver function  mutations        mutations forEach function  mutation              mutation addedNodes  popover popOverSettings                   configuration of the observer  var config          attributes  true        childList  true        characterData  true        pass in the target node  as well as the observer options observer observe    ul   0   config    Demo

User · Answer

This is how I made the code so it can handle dynamically created elements using popover feature  Using this code  you can trigger the popover to show by default  HTML   lt div rel  quot this-should-be-the-target quot  gt   lt  div gt   JQuery    function         var targetElement    rel  quot this-should-be-the-target quot        initPopover targetElement   quot Test Popover Content quot            use this line if you want it to show by default       targetElement  popover  show             function initPopover target  popOverContent              target  each function i  obj                  this  popover                   placement    auto                   trigger    hover                    quot html quot   true                  content  popOverContent

User · Answer

Probably way too late but this is another option       body   popover       selector    rel popover        trigger   hover       html  true      content  function              return   this  parents   row   first   find   metaContainer   html

[javascript] How to bind bootstrap popover on dynamic elements

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to dom

Examples related to bootstrap-popover