Question

请帮我解决这个问题。我输入很少，当输入未聚焦且输入值为空时，我想显示带有警告的弹出窗口。

这就是我所做的。但它的行为是不正确的。另请参阅FIDDLE。

要重现我的错误，请按照以下说明操作：

专注于输入＃1然后取消它。 Popover正在展示和没关系。
在输入＃1中键入内容然后取消它。没有 popover，它也没关系
在输入＃2中键入内容然后取消它，没有 popover也没关系。
再次关注输入＃1，这里再次是popover甚至是输入价值不是空的！

我哪里错了？提前谢谢！

$('input').blur(function(){
    if( !$(this).val() ) {
        $(this).popover({
            title: 'Warning!',
            content: 'Value can not be empty',
            placement: 'bottom'
        }).popover('show');
    } else {
        $(this).popover('hide');
    }
})

Answer 1

您应该使用popover('hide')而不是popover('destroy')。因为隐藏只是隐藏它，但它仍然是一个弹出窗口。因此它将出现在Mouseover / Focus上。

$('input').blur(function(){
    if( !$(this).val() ) {
        $(this).popover({
            title: 'Warning!',
            content: 'Value can not be empty',
            placement: 'bottom'
        }).popover('show');
    } else {
        $(this).popover('destroy');
    }
})

尝试Fiddle

Answer 2

此外，您可以!$(this).val()

，而不是检查$(this).val() == ''

$('input').blur(function(){
    if( $(this).val() == '' ) {
        $(this).popover({
            title: 'Warning!',
            content: 'Value can not be empty',
            placement: 'bottom'
        }).popover('show');
    } else {
        $(this).popover('destroy');
    }
})

Answer 3

在bootstrap 4中，.popover('destroy')已替换为.popover('dispose')。

我意识到这是一个古老的问题，但这个问题首先是关于这个主题的谷歌搜索，如果我知道毁灭被改变了，它可以节省我数小时的头痛。

Answer 4

Popover ('hide')只是隐藏，使用('destroy')。

有关所有popover方法的详细信息，请参阅：

http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Popover_Javascript_Method_destroy.php

如果输入的值为空，则jquery显示popover

4 个答案: