在模糊上显示引导弹出窗口而不是单击

Question

这似乎是一件非常简单的事情，但我现在正在为此拔头发几个小时：我想检查注册表单上用户名的唯一性。所以我正在编写一个小的 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，但在我单击某处并返回输入后，它会显示它。为什么？我在这里错过了什么？

Answer 1

您必须先创建弹出框，然后在模糊中显示它。

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');
});

代码笔