悬停时在 jQuery 工具提示中加载 AJAX 内容

Question

我正在使用jQuery UI 工具提示插件。 工具提示内容是使用 AJAX 生成的。

工具提示的指示符是<a data-id=""属性：

 <a data-id="137514" title="">Testlink1</a>

我有一个问题，我需要通过链接两次 hover 以获取工具提示及其 AJAX 内容加载。 工具提示及其内容应与第一个 hover 一起加载。

我已经建立了一个JSFiddle 。 您可以通过链接查看 hover 以查看加载问题。

jQuery(document).ready(function ($) {

    var ajaxManager = $.manageAjax.create('cacheQueue', {
        queue: true,
        cacheResponse: true
    });

    $('*[data-id]').hover(function () {

        let $tooltip = $(this);
        let id = $tooltip.attr("data-id");

        ajaxManager.add({
            url: "../datenbank/itemscript.php",
            type: "GET",
            cache: "true",
            data: {
                "var": id
            },

            success: function (data) {

                $tooltip.tooltip({
                    tooltipClass: "tooltipitem",
                    content: data,
                    hide: {
                        effect: "slideDown",
                        delay: 0
                    },
                    position: {
                        my: "left+153 top+20",
                        collision: "flipfit"
                    },

                });
            }
        });
    });
});

Answer 1

在您调用 .tooltip() function 之前，元素上没有鼠标悬停事件的侦听器。 因为您在鼠标已经悬停在元素上时创建了工具提示，所以在您将鼠标移开并重新打开之前，该事件永远不会触发。

您需要立即创建工具提示，然后在加载数据后设置内容。 我已经修改了你的JSFiddle来演示。

最初，工具提示只包含一条加载消息： <p class="item-desc">Loading...</p>

然后当内容加载时，插入数据： $tooltip.tooltip({ content: data });

Answer 2

问题是从一开始就不存在工具提示元素。 它在你 hover 一次之后生成。 您的 function 与 JQuery UI hover ZC1C425268E68385D1AB5074AFC14 存在竞争条件您需要确保在工具提示生成后发生悬停。

另一种解决方法是在成功回调中搜索正确的元素。

如果您在沙盒中发布一个损坏的示例，我将能够提供进一步的帮助。