为什么仅将鼠标悬停2次后才显示此jQuery插件(工具提示)的Ajax内容? [英] Why the Ajax content of this jQuery plugin (Tooltipster) is shown only after mouse hover 2 times?

问题描述

我找不到此插件的解决方案，因为我找不到任何有效的演示或文档通过Ajax获取外部内容.

I can't find a solution for this plugin since I cannot find any working demo or documentation for external content via Ajax.

基本上，我有一个带有鼠标悬停JS功能的简单div:

Basically I have a simple div with a mouse hover JS function:

<div onmouseover="myFunct(this,'.$comment['id'].');"  >Hover Me</div>

这是我的JS函数:

function myFunct(element, id){

    $(element).tooltipster({
        contentCloning: true,
        interactive:true,
        maxWidth:250,
        contentAsHTML:true,
        content: 'Loading...',

        // 'instance' is basically the tooltip. More details in the "Object-oriented Tooltipster" section.
        functionBefore: function(instance, helper) {

            var $origin = $(helper.origin);

            // we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
            if ($origin.data('loaded') !== true) {

                $.ajax({
                    type: "POST",
                    url: baseUrl+"/requests/load_profilecard.php",
                    data: 'id='+id+"&token_id="+token_id,
                    cache: false,
                    success: function(html) {           
                    // call the 'content' method to update the content of our tooltip with the returned data
                    instance.content(html);

                    // to remember that the data has been loaded
                    $origin.html('loaded', true);
                    }

                });
            }
        }
    });

}

为什么工具提示仅在第二次鼠标悬停时显示?

这里是类似的例子. JSFiddle

Here is a similar Eg. JSFiddle

更新

感谢支持，这解决了我的问题:

Thanks to the support this has solved my issue:

<div class="tooltip" data-id="'.$comment['id'].'">Hover me!</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.tooltip').tooltipster({
        content: 'Loading...',
        functionBefore: function(instance, helper){
            var $origin = $(helper.origin);
            $.ajax({
                type: "POST",
                url: baseUrl+"/requests/load_profilecard.php",
                data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
                cache: false,
                success: function(html) {           
                    // call the 'content' method to update the content of our tooltip with the returned data
                    instance.content(html);

                }
            });   
        },
        interactive:true,
        contentAsHTML:true,
        maxWidth:250
    });
});
</script>

无论如何，这在Ajax动态内容上不起作用，我也不知道为什么(我试图在Ajax页面上插入它，没办法)

Anyway this doesn't work on Ajax dynamic content, and I don't know why (I tried to insert it on Ajax page, no way)

推荐答案

我建议您做一些事情:首先，将JS与HTML分开(这被认为是最佳做法)，其次，在页面加载时初始化Tooltipster，以及最后，删除包装器功能.初始化工具提示后，默认情况下，您的代码将在悬停时触发.

I'd recommend a few things: first, separate your JS from your HTML (this is considered best practice), second, initialize Tooltipster on page load, and last, remove the wrapper function. Once the tooltip is initialized your code will trigger by default on hover.

从HTML分离JS

<div class="hover-me tool-tip" data-commentId="12345">Hover Me</div>

在文档就绪时初始化工具提示

$(document).ready(function() {
    $('.tooltip').tooltipster();
});

带有悬停的触发工具提示

$('.hover-me').tooltipster({
    // all of your code from above

    functionBefore: function(){
        var commentId = $(this).attr('data-commentId');
    }
});

注意:

Tooltipster的默认触发器是hover(如文档中所示)，但是，您可以通过传入trigger: hover来显式设置它，这将使您的代码更具可读性且因此易于维护.

The default trigger for Tooltipster is hover (as seen in the documentation), however, you could explicitly set it by passing in trigger: hover, which would make your code slightly more readable and as such maintainable.

工具提示支持建议(如

Tooltipster Support Recommendation (as seen in the comments)

之所以添加它，是因为它加强了我在上面的解决方案，并为将来的开发人员添加了上下文……这可能会在注释部分被忽略.

I add this because it reinforces my solution above and adds context for future devs...that, and it might be overlooked in the comments section.

您已经在触发mouseover事件时初始化了工具提示，因此Tooltipster无法听到"该第一个事件并打开工具提示.最好在页面加载时初始化工具提示，然后将注释ID放入data-id属性，该属性将在准备ajax调用之前在function之前检索.

You initialize your tooltip when the mouseover event has already been fired, so Tooltipster cannot "hear" this first event and open the tooltip. You'd better initialize your tooltips at page load and put your comment id in a data-id attribute that you'll retrieve in functionBefore when you prepare your ajax call.

这篇关于为什么仅将鼠标悬停2次后才显示此jQuery插件(工具提示)的Ajax内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！