Question

我有一个不允许的popover（data-trigger =＆＃34; focus＆＃34;），里面有一个文本框。但是，只要我在文本框内单击进行输入就会因为＆＃34; data-trigger =＆＃34;焦点＆＃34;而消失。如何智能地使div在内部点击时不会消失？这是我的HTML：

  <head><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></head>
<body><div><a class="BookAppButton" href="" data-toggle="popover" data-html="true" data-placement="bottom" data-trigger="focus">Click Here</a></div></body>

这是我的jquery：

    $(document).ready(function(){
$('.BookAppButton').click(function(event){
    event.preventDefault();
    console.log("Button Clicked..");
});
$('.BookAppButton').popover({
        title : '',
        html : 'true',
    content:'<div style="border:black 2px solid"><p>Enter name : <input type="text"></input></p></div>'
    });
});

这是我的jsfiddle链接： http://jsfiddle.net/3g3o4xhw/

我在我的智慧结束..请帮助..提前致谢。

Answer 1

popover上的点击隐藏了该popover，因为它们正在窃取浏览器的焦点。一旦按钮失去焦点，弹出窗口就会被隐藏（因为我们设置了data-trigger="focus"）。

要解决您提出的确切问题：

阻止popover div隐藏在点击其内部以进行twitter bootstrap“dismissible popover”（data-trigger =“focus”）？

解决此问题的最简单方法是通过以下方式防止弹出窗口内的点击窃取焦点：

添加事件侦听器以捕获弹出窗口内的点击次数
在已捕获事件上调用preventDefault()

这样可以防止焦点被盗，从而阻止弹出窗口被关闭。

注意：我们需要在mousedown而不是click添加事件监听器，因为这是由浏览器设置焦点时。

可以在此StackOverflow答案中找到有关我们使用mousedown和preventDefault()的原因的更深入解释： Prevent firing focus event when clicking on div

$(function() {
  $('[data-toggle="popover"]').popover()
})

$('body')
  .on('mousedown', '.popover', function(e) {
    console.log("clicked inside popover")
    e.preventDefault()
  });

<html>

<body>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <a tabindex="0" class="btn btn-danger" data-toggle="popover" data-trigger="focus" title="Dismissible" data-content="Clicks in here won't steal focus">
    Dismissible popover
  </a>
</body>
</html>

Answer 2

您应该使用tigger: 'click'。

$('.BookAppButton').popover({
        title : '',
        html : 'true',
    trigger: 'click',
    content:'<div style="border:black 2px solid"><p>Enter name : <input type="text"></input></p></div>'
    });
});

Answer 3

而不是

data-trigger="focus"

你应该使用

data-trigger="'focus'"

用于AngularUI Bootstrap 2.0及以上版本。

Answer 4

此代码对我有用，您可以在任何情况下通过调用 preventDefault（）方法消除弹出窗口。

var closePopOver=true;
    $('[data-toggle="popover"]').popover({
        html: true,
        title: '',
        content: function () {
            return 'Your Html Here';
        }
    }).on('hide.bs.popover', function (hideEvent) {
        if (!closePopOver) {
            hideEvent.preventDefault();
        }
    });

如何防止popover div隐藏在点击其内部为twitter bootstrap“dismissible popover”（data-trigger =“focus”）？

4 个答案: