Twitter Bootstrap popover不能在第一次点击时工作

Question

当我点击一个锚点时，显示一个弹出窗口。但是，弹出式广告不会在第一次点击时触发，但它在第二次点击中的效果如何。

HTML：

<!-- Pop Check --> 
<div class="popover-markup"> 
    <input class="checkbox-inline" type="checkbox" value="Option1"> 
    <a href="javascript:void(0)" class="trigger" data-placement="bottom" tooltip="Manage Users">Option1</a> 
    <!-- Popup Content--> 
    <div class="content hide"> 
     <div class="head hide">Select Users For Option1<span class="close_popover"><i class="fa fa-times"></i></span></div> 
     <div> 
     <label class="checkbox-inline"> 
     <input type="checkbox" id="" class="si_DSCM" value="user6"> User 6 
     </label> 
     </div> 
    </div> 
</div> 

JS：

$(document).on('click', ".popover-markup>.trigger", function() { 

    $(this).popover({ 
     html: true, 
     title: function() { 
      return $(this).parent().find('.head').html(); 
     }, 
     content: function() { 
      return $(this).parent().find('.content').html(); 
     } 
    });  
}); 

这是我的小提琴：https://jsfiddle.net/47pef6g8/

我发现类似的问题，但它并没有帮助我在我的情况。

请帮忙。提前致谢。

Answer 1

查看你的代码，很清楚你正在初始化点击的弹出窗口。因此需要两次点击来显示弹出窗口。我的建议是在文档加载时初始化弹出窗口。

根据您的问题检查样本Fiddle。

$('[data-toggle="popover"]').popover({ 
    html: true, 
    title: function() { 
     return $(this).parent().find('.head').html(); 
    }, 
    content: function() { 
     return $(this).parent().find('.content').html(); 
    } 
}); 

希望这会有所帮助。

- 帮助:)