Jquery 无法关闭引导popover_Jquery_Css_Twitter Bootstrap_Twitter Bootstrap 3_Bootstrap Popover

Jquery 无法关闭引导popover

jquery css twitter-bootstrap twitter-bootstrap-3

Jquery 无法关闭引导popover,jquery,css,twitter-bootstrap,twitter-bootstrap-3,bootstrap-popover,Jquery,Css,Twitter Bootstrap,Twitter Bootstrap 3,Bootstrap Popover,我无法使用jquery关闭popover。当用户输入1以外的值作为输入时，popover将出现我需要使用x符号关闭特定的popover 另外，x没有出现在最右边。它正在下降。我希望它出现在上角或最右边。我不想将标题用于popover <br/> <br/> <br/> <input type="text" class="check" /> <input type="text" class="check" /> <input ty

我无法使用jquery关闭popover。当用户输入1以外的值作为输入时，popover将出现

我需要使用

符号关闭特定的popover

另外，

没有出现在最右边。它正在下降。我希望它出现在上角或最右边。我不想将

标题

用于popover

<br/>
<br/>
<br/>
<input type="text" class="check" />
<input type="text" class="check" />
<input type="text" class="check" />
<input type="text" class="check" />
<input type="button" id="Save" value="Save" />

JQuery

$(document).ready(function() {
var elem ='<div>Invalid</div>'+'<button class="close pull-right" data-dismiss="popover"  onclick="$(this).popover(&quot;hide&quot;);">&times;</button>';
  $("#Save").click(function() {
    $(".check").each(function() {
      $val = $(this).val();
      if ($val != 1) {      
        $(this).popover({
          content: elem,
          html:true
        });
        $(this).popover('show');
      }
    })
  })
})

$（文档）.ready（函数（）{
var elem='Invalid'+'×；'；
$（“#保存”）。单击（函数（）{
$（“.check”）。每个（函数（）{
$val=$（this.val（）；
如果（$val！=1）{
$（这个）({
内容：elem，
html：对
});
$（this.popover（'show'）；
}
})
})
})

尝试将其附加到脚本中

$('body').on('click','.close',function(){
  $(this).closest('.popover').hide();
});

jsiddle:

查看此

无效

需要

显示：inline块

，以便

位于最右侧

为了隐藏popover，我将

onclick

操作更改为以下内容：

onclick="$(this).hide(); $(this).parents(\'.popover\').hide()"

签出此示例：

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Example of Bootstrap Popover with Close Button</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover({
            placement : 'top',
            html : true,
            title : 'User Info <a href="#" class="close" data-dismiss="alert">×</a>',
            content : '<div class="media"><a href="#" class="pull-left"><img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">Jhon Carter</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
        });
        $(document).on("click", ".popover .close" , function(){
            $(this).parents(".popover").popover('hide');
        });
    });
    </script>
    <style type="text/css">
        .bs-example{
            margin: 200px 150px 0;
        }
        .popover-title .close{
            position: relative;
            bottom: 3px;
        }
    </style>
    </head>
    <body>
    <div class="bs-example">
        <button type="button" class="btn btn-primary" data-toggle="popover">Click Me</button>
    </div>
    </body>
    </html>


带有关闭按钮的引导弹出框示例
$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover({
位置：'顶部'，
是的，
标题：“用户信息”，
内容：'Jhon Carter非常棒的Bootstrap popover！我真的很喜欢它。'
});
$（document）.on（“click”，“.popover.close”，函数（）{
$（this.parents（“.popover”）.popover（'hide'）；
});
});
.bs示例{
保证金：200px 150px 0；
}
.popover标题。结束{
位置：相对位置；
底部：3px；
}
点击我

你可以在这里看到活生生的例子-