WordPress:JS 已加载,但其中的功能不起作用

Posted

技术标签:

【中文标题】WordPress:JS 已加载,但其中的功能不起作用【英文标题】:WordPress: JS is loaded but functions in it are not working 【发布时间】:2021-08-19 08:56:39 【问题描述】:

我有一个名为“main.js”的 js 文件,我在 function.php 文件中使用 wp_enqueue_script 将其排入队列。这个文件正在我的页面-slug.php 中加载,但其中的函数根本没有执行。

function.php 文件:

function df_enqueue_scripts() 

    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/src/library/js/main.js', array(), '1.0', true );
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/src/library/js/bootstrap.min.js', array( 'jquery' ), '5.6', true );



// Register the df_enqueue_scripts with wp_enqueue_scripts hook.
add_action( 'wp_enqueue_scripts', 'df_enqueue_scripts' );

page-slug.php 文件:

<?php

get_header();
?>

<button type="button" id="ad-button">Ad</button>
<button type="button" id="mm-button">MM</button>
<button type="button" id="photo-button">Photography</button>
<div id="display-photo"></div>
<div id="display-mm"></div>
<div id="display-ad"></div>

<?php

get_footer();

main.js 文件:

$( '#photo-button' ).on( 'click',
function () 
    $( '#display-photo' ).html("Hello <b>world!</b>");

);

简而言之,我在 main.js 文件中写入任何内容,我期望的更改不会发生或不会反映在我的 page-slug.php 文件中。

【问题讨论】:

在此代码运行时是否存在元素 #photo-button?您是否尝试过将代码包装到 jQuery 的 document.ready 处理程序中,并检查是否有任何改变? @CBroe 提到的所有内容,是否还检查了浏览器的 javascript 控制台以调试可能的错误/警告? @CBroe 是的,#photo-button 确实存在。并且还尝试将代码包装到 jQuery 的 document.ready 处理程序中。但没有任何效果 【参考方案1】:

我认为,jQuery 使用错误的问题。 可能,用 jQuery 包装函数允许使用 $ 变量 并且可以解决问题

jQuery(function($)
        $( '#photo-button' ).on( 'click',
            function () 
                $( '#display-photo' ).html("Hello <b>world!</b>");
            
        );
    )

第二个需要的是将 jQuery 设置为 您的脚本并将脚本版本更新为 1.1

wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/src/library/js/main.js', array( 'jquery' ), '1.1', true );

【讨论】:

我将版本从 1.0 更改为 1.1,它工作正常。感谢您的解决方案。我很高兴错误得到解决,但我不明白为什么 1.0 版本不起作用而 1.1 起作用 与浏览器缓存有关。当您更改脚本版本时 - 浏览器会刷新脚本缓存。 WordPress 将 ver GET 参数添加到脚本 URL。更改脚本后,您应该增加脚本版本。 FE 1.1 1.2。 2.0等... 哦...我明白了。这是缓存问题。因此,对于我的 js 脚本中的每一次更改,我还需要更改脚本的版本号。

以上是关于WordPress:JS 已加载,但其中的功能不起作用的主要内容,如果未能解决你的问题,请参考以下文章

React 路由器 dom 路由已加载到 React Developer 工具中,但路由在浏览器中不起作用

如何整合视觉作曲家自定义wordpress主题

jQuery 就绪功能在 WordPress 中不起作用

Swift:向WKWebView注入JS和CSS不起作用

Wordpress“帖子名称”永久链接不起作用

css 文件在 Spring Theme 模块中不起作用。属性文件已正确加载,但 css 无法正常工作