WordPress中的Qtip2 / Isotope冲突:“未捕获的TypeError:无法调用未定义的方法'调用'”

时间:2013-12-06 00:58:19

标签: javascript php wordpress jquery-isotope qtip2

我遇到了Jquery Isotope和Qtip2之间的冲突。当加载Isotope时,qtip不起作用,当它应该激活时,我在Chrome控制台中收到JS错误:

"Uncaught TypeError: Cannot call method 'call' of undefined" avia.js?ver=1:1326

Avia.js是我父母主题中的一个更大的脚本文件,其中包含完整的Isotope。你猜对了,1326行是包含同位素的行。

当我从该文件中删除Isotope时,Qtip完美无缺。不幸的是,我处于一种我真正需要兼顾的情况。

我设置了一个jsfiddle,其中包含我正在使用的所有相同版本,即使我不顾自己使用所有相同版本,它也可以运行:http://jsfiddle.net/TABd4/8/

所以这就是我加载脚本的方式。在我的孩子主题中(使用子主题会出现问题吗?)functions.php:

//Load jquery version
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', get_stylesheet_directory_uri() . '/scripts/qtip/jquery-1.8.3.min.js', false, null);
   wp_enqueue_script('jquery');
}

//Enqueue our scripts and stylesheet
function theme_name_scripts() {
    wp_enqueue_style('qtip', get_stylesheet_directory_uri() . '/scripts/qtip/jquery.qtip.min.css', null, false, false);
    wp_enqueue_script( 'imagesloaded', 'http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.js', null, false, true);
    wp_enqueue_script('qtip', 'http://qtip2.com/v/nightly/jquery.qtip.js', array('jquery', 'imagesloaded'), false, true);
wp_enqueue_script( 'qtipscript', get_stylesheet_directory_uri() . '/scripts/qtip/qtipscript.js', array('jquery', 'qtip', 'imagesloaded'), null, true);
    }

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

这就是我正在运行以触发qtip(qtipscript.js);

$('.hasTooltip').each(function() { // Notice the .each() loop, discussed below
    $(this).qtip({
        content: {
            text: $(this).next('div') // Use the "div" element next to this for the content
        },
        style: {
            classes: 'qtip-light qtip-shadow qtip-packages'
        },
        position: {
        my: 'top left',
        at: 'bottom left',
        target: 'event'
    }
    });
});

1 个答案:

答案 0 :(得分:2)

找到解决方案:

您需要在同位素脚本之后包含最新版本的imagesLoaded(3.0.4适用于我)。在我的情况下,我只是在加载了所有其他脚本后将脚本硬编码到我的页脚中,它解决了问题。

原来这是一个已知的冲突,但它上面的页面从未出现在我的Google搜索中。 qtip网站上有更多信息:

http://qtip2.com/guides#integration.isotope