Show Bootstrap Popover on Blur not click
Show Bootstrap Popover on Blur not click
这似乎是一件非常简单的事情,但我现在为此苦恼了几个小时:我想检查注册表单上用户名的唯一性。所以我正在编写一个小的 AJAX jquery 函数来调用某个端点,同时我显示一个弹出窗口,表明正在检查唯一性。
https://jsfiddle.net/7p41z88h/
这是我的 html:
<div class="row">
<div class="col-lg-12" style="margin-top:200px">
<form method="post" action="#">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" required="" name='name' id="username" >
</div>
</form>
</div>
</div>
这是我的 js:
var check = '<img src="http://investors.boozallen.com/assets_files/spinner.gif" /> Checking if this username is available...';
$('#username').blur( function(){
$("#username").popover( {
title: '',
content: check,
html:true,
placement: 'top'
});
});
我的期望是这会在 blur
事件中显示 popover
,但它会在我单击某处并返回输入后显示。为什么?我在这里缺少什么?
您必须先创建弹出窗口,然后在模糊上显示它。
var check = '<img src="http://investors.boozallen.com/assets_files/spinner.gif"> Checking if this username is available...';
$('#username').blur(function() {
$(this).popover({
title: '',
content: check,
html: true,
placement: 'top',
trigger: 'manual'
});
$(this).popover('show');
});
$('#username').click(function() {
$(this).popover('hide');
});
CODEPEN
这似乎是一件非常简单的事情,但我现在为此苦恼了几个小时:我想检查注册表单上用户名的唯一性。所以我正在编写一个小的 AJAX jquery 函数来调用某个端点,同时我显示一个弹出窗口,表明正在检查唯一性。
https://jsfiddle.net/7p41z88h/
这是我的 html:
<div class="row">
<div class="col-lg-12" style="margin-top:200px">
<form method="post" action="#">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" required="" name='name' id="username" >
</div>
</form>
</div>
</div>
这是我的 js:
var check = '<img src="http://investors.boozallen.com/assets_files/spinner.gif" /> Checking if this username is available...';
$('#username').blur( function(){
$("#username").popover( {
title: '',
content: check,
html:true,
placement: 'top'
});
});
我的期望是这会在 blur
事件中显示 popover
,但它会在我单击某处并返回输入后显示。为什么?我在这里缺少什么?
您必须先创建弹出窗口,然后在模糊上显示它。
var check = '<img src="http://investors.boozallen.com/assets_files/spinner.gif"> Checking if this username is available...';
$('#username').blur(function() {
$(this).popover({
title: '',
content: check,
html: true,
placement: 'top',
trigger: 'manual'
});
$(this).popover('show');
});
$('#username').click(function() {
$(this).popover('hide');
});