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

Question

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

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

<?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);
}

?>

gt_custom_events.js：

jQuery(document).ready(()=>{

    let placeOrder = document.getElementById('place_order');
    window.dataLayer = window.dataLayer || [];

    placeOrder.addEventListener("mouseover", (e)=>{
            alert('hover');
    });
});// end of document ready

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

该网站的链接为：http: //35.225.152.200

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

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

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

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

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

Answer 1

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

TypeError: place_order is null

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

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

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

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