jac*_*All 11 html javascript jquery twitter-bootstrap bootstrap-popover
我有一个不允许的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上找到答案:
单击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>小智 1
你应该使用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>'
});
});
| 归档时间： |
|
| 查看次数： |
3935 次 |
| 最近记录： |