[英]Why is my Javascript mouseover event not working on my WordPress website?
I am trying to add a hover event listener via JavaScript on an element in my checkout page in my WordPress website. 我试图通过JavaScript在WordPress网站的结帐页面上的元素上添加悬停事件侦听器。 the site being hosted with Google Cloud via a vm instance.
通过虚拟机实例托管到Google Cloud的网站。 I normally have to log in via ssh if I want to make any changes to my code.
如果要更改代码,通常必须通过ssh登录。 The theme I am using is a child theme I made from the storefront theme, I made sure I have registered my JavaScript on to my child theme in the functions.php, I then tested my code on the google chrome devtool console and it worked fine.
我使用的主题是我从店面主题中获得的子主题,我确保已将JavaScript注册到function.php中的子主题中,然后在google chrome devtool控制台上测试了我的代码,效果很好。 But it somehow doesn't work on my external JavaScript file.
但这在我的外部JavaScript文件上不起作用。
Here is my functions.php code to register my script and style. 这是我的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: 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
I have also double checked with view page source, and my file is also being loaded on the page. 我还仔细查看了视图页面源,并且我的文件也正在页面上加载。
link to the website is: http://35.225.152.200 该网站的链接为:http: //35.225.152.200
and I want my script to work on my checkout page. 并且我希望我的脚本在我的结帐页面上运行。
I have previously tried putting this script on to the markup itself (embedded JavaScript). 之前,我曾尝试将此脚本放在标记本身(嵌入式JavaScript)上。 I first tried on the header and on the footer and the result was the same...
我首先尝试使用页眉和页脚,结果是相同的...
I have also tried using the ES5 version of JavaScript which didnt change the result either. 我也尝试过使用ES5版本的JavaScript,它也没有改变结果。
I recently also tried enqueue jQuery on to independently on top of adding it as a dependency and that did not solve my problem. 我最近还尝试将jQuery单独加入队列,除了将其添加为依赖项之外,这并不能解决我的问题。
The alert is only for testing purposes but eventually I am going to push an on to the dataLayer for Google Tag manager. 该警报仅用于测试目的,但最终我将继续使用datatager for Google跟踪代码管理器。
You have error in your code. 您的代码中有错误。 Here is the output from browser's console:
这是浏览器控制台的输出:
TypeError: place_order is null
So it means that there is no element with id equals to place_order
on page. 因此,这意味着在页面上没有id等于
place_order
元素。 CSS selector used under the hood is #place_order
. 在
#place_order
使用的CSS选择器是#place_order
。
And basically if you're using jQuery better write all code in it's syntax: 基本上,如果您使用的是jQuery,则最好使用以下语法编写所有代码:
jQuery(document).ready(()=>{
jQuery('#place_order').hover(() => {
alert('hover');
});
});
But it does not fix main issue outlined above. 但是它不能解决上面概述的主要问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.