Bootstrap popover hover第一次的时候弹窗不出现，从第二次起才开始出现 (ajax填充内容)

Question

<a href="#"  data-studentId="01" data-toggle="popover">Student1</a>
<a href="#"  data-studentId="02" data-toggle="popover">Student2</a>
<a href="#"  data-studentId="03" data-toggle="popover">Student3</a>

$(function () {
    $("a").hover(function(){
        var e = $(this);
        var studentId = e.attr('data-studentId');
        $.ajax({
           url: 'http://www.***',
           type: 'get',
           data:{"studentId":studentId},
           dataType: 'jsonp',
           success: function(msg){//msg:  {name: "Lisa",gender: "female"}
              var content = '<div>' + msg.name + '</div>' + '<div>' + msg.gender + '</div>';
              e.popover({
                  html: true,
                  trigger: 'hover',
                  placement: 'bottom',
                  container: 'body',
                  content: content,
                  delay: { "show": 500, "hide": 200 }
              })
           }
       })
    })
})

应该是a的hover事件与popover事件有点冲突了，但是不清楚怎么修改一下，请熟悉的高手指点一下，谢谢！

Answer 1

e.popover()后面添加 .popover('show');
e.popover()只是做了配置，鼠标已经在上面了，所以不会触发hover事件。
另外，你这样每次都需要ajax请求一次，其实可以在$.ajax语句之前添加e.off('hover'); 移除当前a元素的hover事件。