Qtip2 / Изотопен конфликт в WordPress: Uncaught TypeError: Не може да се извика метод „call“ на undefined

Имам нещо, което изглежда е тежък конфликт между Jquery Isotope и Qtip2. Когато Isotope е зареден, qtip не работи и когато ТРЯБВА ДА се активира, получавам JS грешка в моята конзола на Chrome:

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

Avia.js е по-голям скрипт файл в моята родителска тема, който съдържа Isotope в неговата цялост. Ред 1326 е, познахте, редът, съдържащ Isotope.

Когато премахна 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'
    }
    });
});

person Brian Johnson    schedule 06.12.2013    source източник


Отговори (1)


Намерих решението:

Трябва да включите най-новата версия на imagesLoaded (3.0.4 работи за мен) СЛЕД вашия Isotope скрипт. В моя случай просто кодирах скрипта в долния колонтитул, след като всички други скриптове бяха заредени, и това реши проблема.

Оказва се, че това е известен конфликт, но страницата на него никога не се е показвала в търсенията ми с Google. Има повече информация за него тук на сайта на qtip:

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

person Brian Johnson    schedule 07.12.2013