javascript - Bootstrap Popover 和 JQuery 在 'show' 之后不为 'hide'

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);