我有一个不允许的popover（data-trigger =“focus”），里面有一个文本框。但是一旦我在文本框内单击进行输入就会因为“data-trigger =”焦点而消失“。如何智能地使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/
我在我的智慧结束..请帮助..在此先感谢。
弹出窗口上的点击隐藏了弹出窗口，因为它们正在窃取浏览器的焦点。一旦按钮失去焦点，弹片就会被隐藏（因为我们设置了data-trigger="focus"）。
为了解决您提出的确切问题：
防止popover div隐藏在点击其内部为twitter bootstrap“dismissible popover”（data-trigger =“focus”）？
解决此问题的最简单方法是通过以下方式防止弹出窗口内的点击窃取焦点：
preventDefault()这样可以防止焦点被盗，从而阻止弹出窗口被关闭。
注意：我们需要在mousedown而不是click上添加事件监听器，因为这是在浏览器设置焦点时。
关于我们使用mousedown和preventDefault()的原因的更深入解释可以在StackOverflow答案中找到：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>你应该使用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>'
});
});
代替
data-trigger="focus"
你应该使用
data-trigger="'focus'"
适用于Angular UI Bootstrap 2.0及更高版本。