Question

当鼠标悬停在元素上时，我想显示ajax加载的内容，我正在使用qTip来实现这一点，但是只有当我第二次悬停时它才有效。

$(document).on('mouseenter', 'span', function(){
if(!$(this).data('qtip')){
    $.ajax({
        context : this,
        url     : '/', 
        success : function(html) {
            $(this).qtip({
                content: "..now it works.",
                position: {
                    my: 'top left',
                    target: 'mouse',
                    //viewport: $(window), // Keep it on-screen at all times if possible
                    adjust: {
                        x: 10,  y: 10
                    }
                },
            });
        },
        error   : function(err){
            console.log(err.reponseText);
        }
    }); 
}

}）; 这是我的fiddle。

Answer 1

首先 - 这里最简单的灵魂就是使用qtip Ajax plugin - 所以你不需要处理它。

但是，只是为了解释您的代码出了什么问题 - 问题是你只是在第一个鼠标悬停在元素上时初始化qtip。

因此，您需要将代码拆分为2：

qtip初始化:(请注意，内容必须至少包含一个字符）

$('span').qtip({
  content: " ",
  position: {
    my: 'top left',
    target: 'mouse',
    //viewport: $(window), // Keep it on-screen at all times if possible
    adjust: {
      x: 10,  y: 10
    }
  },
});

实际的mouseenter事件，它使用qtip API（http://qtip2.com/api）更改qtip'内容'

$(document).on('mouseenter', 'span', function(){
        $.ajax({
        context : this,
        url     : '/', 
        success : function(html) {        
            $(this).qtip('option', 'content.text', 'response');
        },
        error   : function(err){
            console.log(err.reponseText);
        }
    }); 
});

Qtip Ajax请求不首先悬停

1 个答案: