Jquery 使用ajax进行qTip2定位

我正在为一组菜单创建工具提示，内容是通过ajax调用加载的。我需要每次创建工具提示时刷新内容。我正在使用这个指南：（上面写着“抓取内容连续”）

它可以工作，内容会被加载，但是工具提示的位置不会改变，从而使箭头偏离中心。工具提示仅向右增长，不会重新定位自身

守则：

$('.dropdown').qtip({
    overwrite: true,
    position: {
        effect: false,
        my: 'top center',  // Position my top left...
        at: 'bottom center' // at the bottom right of...
    },
    style: 'qtip-menu',
    show: {
        delay: 200
    },
    hide: {
        delay: 200,
        fixed: true
    },
    content: {
        text: function(event, api) {
            var id = $(this).data('id');
            api.elements.content.html('Loading...');

            return $.ajax({
                type: 'post',
                url: '<?=base_url();?>loadajax/menu',
                data: { id: id }
            })
            .done(function(html) {
                return html;
            })
                .then(function(content) {
                    return content
                }, function(xhr, status, error) {
                    api.set('content.text', status + ': ' + error);
                })
            .always(function() {
                $('.dropdown').qtip('reposition');
            });
        }
    }
});

$（'.dropdown'）.qtip({
改写：对，
职位：{
效果：错，
my:'上止点'，//放置我的左上角。。。
在：'底部中间'//在…的右下角。。。
},
样式：“qtip菜单”，
展示：{
延误：200
},
隐藏：{
延误：200，
修正：正确
},
内容：{
文本：函数（事件、api）{
var id=$（this.data（'id'）；
api.elements.content.html（'Loading…'）；
返回$.ajax({
键入：“post”，
url:“加载Ajax/菜单”，
数据：{id:id}
})
.done（函数（html）{
返回html；
})
.然后（功能（内容）{
返回内容
}，函数（xhr，状态，错误）{
api.set（'content.text'，status+'：'+错误）；
})
.always（函数（）{
$（'.dropdown'）.qtip（'重新定位'）；
});
}
}
});

---

正如您所知，在ajax调用成功后，我尝试重新定位，但没有做任何困难的事情。

您应该使用事件来更新内容

这里有一个例子：

        var xhr = null;
        $('#dialog').qtip({
            position: {
                effect: false,
                my: 'top center',  // Position my top left...
                at: 'bottom center' // at the bottom right of...
            },
            style: 'qtip-menu',
            show: {
                delay: 200
            },
            hide: {
                delay: 200,
                fixed: true
            },
            content: 'Loading...',
            events: {
                show: function(event, api){
                    api.set('content.text', 'Loading...');
                    api.reposition();
                    xhr = $.ajax({
                        url: '/echo/html/',
                        type: 'post',
                        data: {
                            html: "<ul><li>element1</li><li>element2</li><li>element3 very very very long</li></ul>",
                            delay: 1
                        },
                        error: function(xhr, status, error){
                            if(status !== 'abort'){
                                api.set('content.text', status + ': ' + error);
                                api.reposition();
                            }
                        },
                        success: function(html){
                            api.elements.content.html(html);
                            api.reposition();
                        }
                    });
                },
                hide: function(event, api) {
                    if(xhr){
                        xhr.abort();
                    } 
                }
            }
        });

var xhr=null；
$（“#对话框”）.qtip({
职位：{
效果：错，
my:'上止点'，//放置我的左上角。。。
在：'底部中间'//在…的右下角。。。
},
样式：“qtip菜单”，
展示：{
延误：200
},
隐藏：{
延误：200，
修正：正确
},
内容：“正在加载…”，
活动：{
显示：函数（事件、api）{
api.set（'content.text'，'Loading…'）；
api.reposition（）；
xhr=$.ajax({
url:“/echo/html/”，
键入：“post”，
数据：{
html:“
元素1
元素2
元素3非常非常非常长
”，
延误：1
},
错误：函数（xhr、状态、错误）{
如果（状态！=“中止”）{
api.set（'content.text'，status+'：'+错误）；
api.reposition（）；
}
},
成功：函数（html）{
api.elements.content.html（html）；
api.reposition（）；
}
});
},
隐藏：函数（事件、api）{
if（xhr）{
xhr.abort（）；
} 
}
}
});

---

这里有一个完整的例子：

你有没有弄明白这一点？我想我也有同样的问题。我没有，我想我有，但它不起作用。这可以帮助：