javascript - Ajax 不会在 jQuery 中悬停时更新

Question

我关注了 this guide 制作 jQueryUI 工具提示的 Ajax 示例 ( Demo )。我对其进行了一些调整，使其通过使用数据属性加载不同的文件。我可以在页面加载时获取第一个内容，但是当我将鼠标悬停在第二个标题上时，它不会检索第二个内容，但仍然显示第一个内容。谁能告诉我代码有什么问题吗？

$(document).tooltip({
      items: "[data-info]",

      content: function () {
            return $(this).data('info');
      },
      show: null, 
      close: function (event, ui) {
            ui.tooltip.hover(

          function () {
                $(this).stop(true).fadeTo(400, 1);
          },

          function () {
                $(this).fadeOut("150", function () {
                    $(this).remove();
                })
          });
        }
});

$('.loadtip').tooltip({
      my: "center",
      at: "right+200",
      track: false,

      content:function(callback) { //callback
       var loadfile = $('.loadtip').data("info");

        $.get(loadfile,{}, function(data) {
            callback(data);

        });

      },

});

HTML:

<h4 title="" class="loadtip" data-info="First.html">View Info</h3>

<h4 title="" class="loadtip" data-info="Second.html">View Detail</h3>

Answer 1

尝试使用:

var loadfile = $(this).data("info");

而不是:

var loadfile = $('.loadtip').data("info");

在您的content函数中。