Bootstrap Popover & JQuery 在“隐藏”后不“显示”

Question

我遇到了一个弹出框的问题，它在点击事件后不再显示。

我正在使用 AngularJS 来观看一些动态内容，并且我想在内容发生变化时重新加载弹出框。在弹出窗口中是一个链接到更改我的内容的功能的按钮。单击按钮时，我想重新加载弹出框。 “隐藏”功能有效，但在我再次单击输入之前它会闪烁并且不会“显示”弹出框。当我单击它时，内容会更新。但我希望它在没有用户点击的情况下“显示”..

我的代码如下；

输入字段；

<input id='test' ng-model="form.location" type="text" class="form-control">

弹出框内容

<div id="geo" class="popover-body hidden" ng-controller="geoCtrl">
    <div ng-controller="updateGeo">
        <button ng-show="update[0]" id="findme" style="margin: -10px" class="btn btn-success btn-sm" ng-click="getGeo()"><span class="purp"><i class="fa fa-street-view"></i> FIND ME!</span></button>
        <button ng-hide="update[0]" id="findme" style="margin: -10px" class="btn btn-simple btn-sm" ng-click="getGeo()"><span class="purp"><i class="fa fa-street-view"></i> FIND ME!</span></button>
    </div>
</div>

ng-hide/ng-show 控制显示什么按钮。

Jquery;

<script type="text/javascript">

var content = $('[id*="geo"]');

$(document).on('click', '#test', function() {

    $('#test').popover('show')

})

$('#test').popover({
    html: true,
    trigger: 'manual',
    container: 'body',
    placement: 'top',
    content: function () {
        return content.html();
    },
});

$(document).on('click', '#findme', function()
{
    angular.element('#geo').scope().getGeo();
    angular.element('#geo').scope().$apply();

    $('#test').popover('hide');
    $('#test').popover('show')

});

一切正常，您单击输入它会显示带有正确按钮的弹出框。您单击按钮，弹出框会隐藏，但在您重新单击输入之前不会再次显示。当它确实显示正确的内容时。

我怎样才能让它自己显示而不必再次点击输入？

Answer 1

我不确定，但是如果您尝试将 $('#test').popover('show'); 弹出框后隐藏在 setTimeout(function(){ 像这样

$('#test').popover('hide');
setTimeout(function(){
$('#test').popover('show');
},100);