jQuery 库和代码不工作 - 控制台抛出 0 错误

Posted 2023-05-09

【中文标题】jQuery 库和代码不工作 - 控制台抛出 0 错误

【英文标题】：jQuery libraries and code aren't working - console throwing 0 errors

【发布时间】：2020-08-22 07:22:23

【问题描述】：

在过去的 4 个小时里，我一直在尝试调试一个似乎在困扰我的问题。

我最初尝试实现infinite-scroll.js（在此处找到：https://infinite-scroll.com/）但终其一生都无法让它工作，所以我暂时放弃并继续前进。

然后我继续尝试实现slidebars.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 个错误，但我似乎无法弄清楚为什么这些库不起作用。

【问题讨论】：

尝试在其他库之前加载 jquery。我认为这是一个依赖项，所以应该先加载。

同意。我试过移动它无济于事。

您需要测试 jQuery 是否正常工作。添加更多 console.log 以放置在滑动条单击处理程序中。 Console.log 之类的（“我被点击了！”）至少会告诉您基于 jQuery 的点击处理程序是否正在工作。如果那里什么都没有，那就告诉你两件事之一……要么你附加到错误的对象，要么 jQuery 不工作。

【参考方案1】：

首先，您不需要将 jQuery 文件排入队列，它是 WordPress 代码的一部分，您可以将其添加为依赖项（就像您已经做过的那样）。

但是您的问题是，您的脚本中的按钮（带有$( '.toggle-id-1' )）在它实际出现在页面上之前 - 您的脚本超出了您的 html。这就是为什么 jQuery 没有找到那个元素并忽略所有你想分配给点击事件的东西。

请注意，您在页脚中加载了所有脚本（这是一种正确的方法），因此您只需将自定义脚本移动到页脚中（</body> 之前）或将其移动到单个文件中并使用 wp_enqueue_script 将其排入队列，提供您需要的所有依赖项。