Question

我正在尝试通过JavaScript在WordPress网站的结帐页面中的元素上添加悬停事件侦听器。通过虚拟机实例托管到Google Cloud的网站。如果要更改代码，通常必须通过ssh登录。我使用的主题是我从店面主题中获得的子主题，我确保已将JavaScript注册到function.php中的子主题中，然后在google chrome devtool控制台上测试了我的代码，效果很好。但这在我的外部JavaScript文件上不起作用。

这是我的functions.php代码，用于注册我的脚本和样式。

//select[@name='search_comb']/option[starts-with(@value,'A')]/@value

gt_custom_events.js：

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function my_theme_enqueue_styles() {
 wp_enqueue_style( 'storefront', get_template_directory_uri() 
.'/style.css' );

wp_enqueue_script('jquery');

wp_enqueue_script('gt-custom-events',get_stylesheet_directory_uri() 
. '/js/gt_custom_events.js', 'jquery', '1.0.0',true);
}

?>

我也仔细查看了查看页面源，并且我的文件也正在页面上加载。

网站链接为：http://35.225.152.200

并且我希望我的脚本在我的结帐页面上运行。

我以前曾尝试将此脚本放到标记本身（嵌入式JavaScript）上。我首先在页眉和页脚上进行了尝试，结果是相同的...

我也尝试过使用ES5版本的JavaScript，该版本也没有改变结果。

我最近还尝试将jQuery单独加入队列，除了将其添加为依赖项之外，这并不能解决我的问题。

该警报仅用于测试目的，但最终我要继续使用Google跟踪代码管理器的dataLayer。

Answer 1

您的代码中有错误。这是浏览器控制台的输出：

TypeError: place_order is null

因此，这意味着在页面上没有id等于place_order的元素。内幕使用的CSS选择器是#place_order。

基本上，如果您使用的是jQuery，则最好使用其语法编写所有代码：

jQuery(document).ready(()=>{
    jQuery('#place_order').hover(() => {
        alert('hover');
    });
});

但是它不能解决上面概述的主要问题。

为什么我的Javascript鼠标悬停事件在我的WordPress网站上不起作用？

1 个答案: