為什么我的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');
    });
});

但是它不能解決上面概述的主要問題。