Javascript 对于动态生成的内容，首次单击时未显示弹出窗口

我想为我的网页买一个流行音乐播放器。它在第一次点击时对我不起作用，但在点击后效果很好。我意识到它在第一次点击时被实例化，因此不会显示。有没有更好的方法来实例化它，因为我使用的是运行时生成的id。我看过类似的问题，但它们似乎对我不起作用。这是我写的代码

    <table id="userInfo">
  <thead>
       <tr>
        <th>UserGroup</th>
      </tr>
  </thead>

  <tbody>
  <% @userdetails.each do |user| %>
      <tr>
        <td>
          <a class='user_show_more' data-placement='left' id='<%= user %>'>[+]</a>
              <!-- popover table starts here -->
              <div id="<%= user %>_popover" style="display: none">
                <table>
                  <thead>
                  <tr>
                    <th>UserNames</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>
                      <%= user['name'] %>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <!-- popover ends here -->
          <% user['group'] %>
        </td>
      </tr>
  <% end %>
  </tbody>
</table>

---

您可以向弹出窗口添加两个单击处理程序。第一个使用“one”，第二个使用“on”

HTML

---

我相信在初始化popover之后，您仍然需要调用show。将“$（popover_id）.popover（'show'）；”添加到单击处理程序的末尾。它在第一次单击时起作用，之后不起作用。@imuqtadirinstead@imuqtadir另外，您是否正在尝试优化页面加载，或者您的最终目标是什么？

    $('.user_show_more').on('click', function (e) {
        var $this = $(this)
        var popover_id = '#'+$this.attr("id");
        $(popover_id).popover({
            html : true,
            content: function() {
                var popover = '#'+$this.attr("id")+'_popover';
                return $(popover).html();
            }
        });
    });

  <button type="button"
          class="btn btn-lg btn-danger"
          data-toggle="popover" 
          id="Temp"
          >Stuff</button> 


  <script type="text/html" id="Temp_popover">
   <div>  
      <table>
        <thead>
          <tr>
           <th>UserNames</th> 
          </tr>
        </thead>
         <tbody>
          <tr>
           <td>blah</td>
          </tr>
         </tbody>
       </table>
    </div>      
  </script>

    function PopoverClick()
{
  $(this).popover('toggle'); 
}




$('[data-toggle="popover"]').one('click',function(e){

  console.log('once');
  var _this = $(this);


  _this.popover(
  {
    html:true,
    content: function()
    {
      return $('#'+$(this).attr("id")+'_popover').html();         
    },
    trigger: 'manual',
    placement:'right'    
  }).popover('show');  

  _this.on('click',PopoverClick);

});