javascript - 如何使Qtip2工具提示动态化

当页面加载时，每个工具提示都可以正常工作，但是当数据通过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新手，无法将其与此代码集成

最佳答案

qTip小提琴建议的是所谓的delegated event handler。技巧是将mouseenter处理程序附加到父元素，但使用选择器将事件委托给后代-在所有带有<a>属性title的a[title]标记中摆弄。

您可以轻松地使这种方法适应您自己的代码。您想将qTips绑定到任何具有.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'
  });
});

注意缺少ready()处理程序；不必要，应该generally be avoided。

关于javascript - 如何使Qtip2工具提示动态化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38160146/