Javascript WordPress中的Qtip2/同位素冲突;未捕获类型错误:无法调用方法';呼叫';“未定义”的定义;
我在Jquery同位素和Qtip2之间有一个很难的冲突。当同位素被加载时,qtip不工作,当它应该被激活时,我在我的Chrome控制台中得到JS错误:Javascript WordPress中的Qtip2/同位素冲突;未捕获类型错误:无法调用方法';呼叫';“未定义”的定义;,javascript,php,wordpress,jquery-isotope,qtip2,Javascript,Php,Wordpress,Jquery Isotope,Qtip2,我在Jquery同位素和Qtip2之间有一个很难的冲突。当同位素被加载时,qtip不工作,当它应该被激活时,我在我的Chrome控制台中得到JS错误: "Uncaught TypeError: Cannot call method 'call' of undefined" avia.js?ver=1:1326 在我的父主题中,Avia.js是一个较大的脚本文件,它包含同位素的全部内容。你猜对了,1326线是含有同位素的线 当我从该文件中删除同位素时,Qtip工作得非常好。不幸的是,我现在的处境
"Uncaught TypeError: Cannot call method 'call' of undefined" avia.js?ver=1:1326
在我的父主题中,Avia.js是一个较大的脚本文件,它包含同位素的全部内容。你猜对了,1326线是含有同位素的线
当我从该文件中删除同位素时,Qtip工作得非常好。不幸的是,我现在的处境是,我真的需要两者都去工作
我用我正在使用的所有相同版本设置了一个JSFIDLE,尽管我特意使用了所有相同的版本,但出于某种原因,它仍然有效:
下面是我加载脚本的方式。在my child theme的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)的内容
找到解决方案:
在你的脚本之后,你需要包括imagesLoaded的最新版本(我用的是3.0.4)。在我的例子中,我只是在加载所有其他脚本后将脚本硬编码到我的页脚中,它解决了这个问题
事实证明这是一个已知的冲突,但上面的页面从未出现在我的谷歌搜索中。qtip网站上有更多信息:
$('.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'
}
});
});