Question

当页面加载每个工具提示工作都很好但是当数据通过ajax刷新然后它就停止工作我怎么能让它工作？

$(document).ready(function() {
    // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
    $('.userExtend').each(function() {

        $(this).qtip({
            content: {
                text: function(event, api) {
                    $.ajax({
                            url: api.elements.target.attr('data-url') // Use href attribute as URL
                        })
                        .then(function(content) {
                            // Set the tooltip content upon successful retrieval
                            api.set('content.text', content);
                        }, function(xhr, status, error) {
                            // Upon failure... set the tooltip content to error
                            api.set('content.text', status + ': ' + error);
                        });

                    return 'Loading...'; // Set some initial text
                }
            },
            position: {
                viewport: $(window)
            },
            hide: {
                fixed: true,
                delay: 300
            },
            style: 'qtip-light'
        });
    });
});

根据qtip2，我们是如何让它变得动态http://jsfiddle.net/qTip2/qcwV4/但我是jquery＆amp;的新手。无法将其与此代码集成

Answer 1

qTip小提示所暗示的是所谓的delegated event handler。诀窍是将mouseenter处理程序附加到父元素，但通过使用选择器将事件委托给后代 - 在所有<a>标记中使用title属性{{1 }}

您可以轻松地将此方法适用于您自己的代码。您希望将qTips绑定到具有类a[title]的任何元素：

.userExtend

注意缺少$('body').on('mouseenter', '.userExtend', function() { $(this).qtip({ content: { text: function(event, api) { $.ajax({ url: api.elements.target.attr('data-url') // Use href attribute as URL }) .then(function(content) { // Set the tooltip content upon successful retrieval api.set('content.text', content); }, function(xhr, status, error) { // Upon failure... set the tooltip content to error api.set('content.text', status + ': ' + error); }); return 'Loading...'; // Set some initial text } }, position: { viewport: $(window) }, hide: { fixed: true, delay: 300 }, style: 'qtip-light' }); });处理程序;没有必要，generally be avoided。

如何使qtip2工具提示动态化

1 个答案: