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

时间:2018-01-18 22:39:16

标签: javascript jquery twitter-bootstrap

我遇到的问题是弹出窗口在点击事件后不再显示。

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

我的代码如下;

输入字段;

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

});

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

如何在不必再次点击输入的情况下自行显示?

1 个答案:

答案 0 :(得分:0)

我不确定,但是如果你试图把它放了     $( '#测试'),酥料饼( '秀')。 popover隐藏在setTimeout之后(function(){喜欢这个

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