时间戳

首页 > 解决方案 > WordPress：JS 已加载，但其中的功能不起作用

javascript - WordPress：JS 已加载，但其中的功能不起作用

问题描述

我有一个名为“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 文件中。

标签： javascriptphpjquerywordpresswordpress-theming

解决方案

我认为，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 );

推荐阅读