动态加载jQuery qTip代码 [英] Loading jQuery qTip code dynamically

问题描述

对于我正在编写的应用程序，我需要在提交表单时将内容动态加载到DIV中.

For an application I am writing, I have the need to dynamically load content into a DIV when a form is submitted.

此动态加载的内容需要几个工具提示，以便在加载时自动显示(无需事件触发它).我选择qTip是因为它具有执行此操作的参数，这与我发现的大多数其他工具提示不同，后者需要一个事件来触发工具提示(例如onmouseover).

This dynamically loaded content needs several tooltips to be displayed automatically at the time of loading (no need for an event to trigger it). I chose qTip because it has parameters to do this, unlike most other tooltips I found, which require an event to trigger the tooltip (like onmouseover).

这是用于实现此目的的qTip代码:

This is the qTip code used to achieve this:

$(function(){
    $('#someelement').qtip({
        content: 'This is the message!',
        show: { ready: true, when: false },
        hide: { false },
        position: {
            corner: {
                target: 'topLeft',
                tooltip: 'bottomRight'
            }
        },
        style: {
                        ............ styling code here................
            }
        }
    })
});

在我尝试过的任何形状或形式下，它都可以正常工作.提示成功显示.

This works fine in any shape or form that I try it. The tip successfully appears.

但是，如果我随同内容一起动态加载此代码，则不会显示工具提示.

However, the tooltip does not appear if I am dynamically loading this code along with the content.

正在使用Malsup的出色格式和taconite插件加载内容.

The content is being loaded using Malsup's great form and taconite plugins.

任何想法将不胜感激！

当然，如果您知道我可以使用它来实现相同的相似效果的另一种方法或插件，请不要害羞地建议它. :)

Of course, if you know of another method or plugin I could use to achieve the same similar effect, don't be shy to suggest it. :)

推荐答案

我以前遇到过此问题，这就是我解决的方法.将插件代码放在单独的函数中，并在文档准备好时调用它:

I've had this problem before and this is how I solved it. Put the plugin code inside a separate function and call that on document ready:

$(function(){
    loadQtip();
});

function loadQtip() {
    $('#someelement').qtip({
        content: 'This is the message!',
        show: { ready: true, when: false },
        hide: { false },
        position: {
            corner: {
                target: 'topLeft',
                tooltip: 'bottomRight'
            }
        },
        style: {
                        ............ styling code here................
            }
        }
    })
}

然后，当您添加新数据时，再次调用该函数:

Then when you add in new data call the function again:

...
complete: function() {
    loadQtip();
}

对于诸如单击，更改等事件，您会发现.live()方法有效，但是将插件设置为元素时，没有持久方法.

You'll find for events such as click, change etc the .live() method works a treat, but when your setting a plugin to an element there isn't a persistent method.

这篇关于动态加载jQuery qTip代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！