jQuery библиотеки и код не работают - консоль выдает 0 ошибок - PullRequest
Новая
       21

jQuery библиотеки и код не работают - консоль выдает 0 ошибок

0 голосов
/ 07 мая 2020

Я потратил последние 4 часа, пытаясь отладить проблему, которая мне кажется призрачной.

Сначала я пытался реализовать бесконечную прокрутку. js (Найдено здесь: https://infinite-scroll.com/ ) и не мог, хоть убей, заставить его работать, поэтому я сдался и двинулся дальше.

Затем я попытался реализовать ползунки. js (Найдено здесь: https://github.com/adchsm/Slidebars) и получили тот же результат. Абсолютно ничего не работает, но консоль выдает 0 ошибок.

Скрипты загружаются и видны при просмотре исходного кода страницы.

Поэтому я могу только предположить, что что-то не так с моей постановкой в ​​очередь порядок сценариев или что-то в этом роде.

Вот мой список очереди, расположенный в functions.php

/**
 * Enqueue scripts and styles.
 */
function sativa_scripts() {
    wp_enqueue_style( 'sat-style', get_stylesheet_uri(), array(), _S_VERSION );
    wp_style_add_data( 'sat-style', 'rtl', 'replace' );

    wp_enqueue_style( 'bootstrap-css', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), true );

    wp_enqueue_style( 'font-awesome', 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array() );

    wp_enqueue_style( 'add_google_fonts', 'https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;800;900&display=swap', false );

    wp_enqueue_script( 'sat-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );

    wp_enqueue_script( 'sat-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), _S_VERSION, true );

    wp_enqueue_script( 'sat-js', get_template_directory_uri() . '/js/sat-js.js', array('jquery'), true );

    wp_enqueue_script( 'jquery', get_template_directory_uri() . 'https://code.jquery.com/jquery-3.5.0.js', array(), '20120206', true );

    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array('jquery'), true );

    wp_enqueue_script( 'cookie-js', get_template_directory_uri() . '/js/js.cookie.min.js', array('jquery'), true );

    wp_enqueue_script( 'slide-bars-js', get_template_directory_uri() . '/js/slidebars.js', array('jquery'), true );

    wp_enqueue_style( 'slide-bars-css', get_stylesheet_directory_uri() . '/css/slidebars.css', array(), true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'sat_scripts' );

Ниже приведен код, реализованный в соответствии с инструкциями ползунков:

В archive-product.php чуть ниже тега </header> у меня есть: 

<div canvas="container">
    </div>

    <div off-canvas="id-1 left reveal">
    </div>

    <script>
      ( function ( $ ) {
        // Initialize Slidebars
        var controller = new slidebars();
        controller.init();

        // Toggle Slidebars
        $( '.toggle-id-1' ).on( 'click', function ( event ) {
          // Stop default action and bubbling
          event.stopPropagation();
          event.preventDefault();

          // Toggle the Slidebar with id 'id-1'
          controller.toggle( 'id-1' );
        } );
      } ) ( jQuery );
    </script>


<div class="container shop-section">
    <button class="toggle-id-1" data-toggle="tooltip" data-placement="top" title="Use our Advanced Filters to find the perfect product.">FILTER</button>

Любая помощь приветствуется, поскольку я считаю, что это, вероятно, причина многих из моих болей. Кажется, я не могу понять, почему эти библиотеки не работают, несмотря на то, что выдает 0 ошибок ни в консоли, ни в Query Monitor.

1 Ответ

0 голосов
/ 08 мая 2020

Прежде всего, вам не нужно ставить в очередь jQuery файлы, это часть кода WordPress, вы можете просто добавить его как зависимость (как вы уже сделали).

Но ваша проблема заключается в том, что вы нацеливаетесь на свою кнопку (с $( '.toggle-id-1' )) в своем скрипте ДО того, как она действительно появляется на странице - ваш скрипт идет НАД вашим HTML. Вот почему jQuery просто не находит этот элемент и игнорирует все, что вы хотите назначить событию щелчка.

Обратите внимание, что вы загружаете все скрипты в нижний колонтитул (это правильный способ сделать это) , поэтому все, что вам нужно сделать, это переместить свой собственный сценарий в нижний колонтитул (до </body>) или переместить его в один файл и поставить его в очередь с wp_enqueue_script, указав все необходимые вам зависимости.

...