javascript - 如何在 Elementor 中向弹出窗口添加点击事件?
问题描述
使用 WordPress 和 Elementor 页面构建器,我创建了一个导航菜单弹出模板。单击包含子菜单的菜单项时,我想淡入子菜单项并隐藏菜单。
当我将 JavaScript 代码添加到弹出窗口(使用插件)时,eventlistener 函数不起作用,但我的代码工作正常。我在简单页面中使用它,但不在弹出窗口本身中使用它;我尝试了(自定义 CSS 和 JS)插件,它也不起作用。它是 Elementor 中的错误还是无法以通常的方式为弹出窗口中的元素添加均衡监听器?
代码 :
const element = document.querySelector('.element');
console.log(element); < ------------------------------here is working!!!
element.addEventListener('click', function(){
any code in here <---------------------------------------not working !
});
解决方案
我认为问题可能是,您正在使用querySelector
. 它返回文档中与指定选择器或选择器组匹配的第一个元素。
使用 wordpress,您可以使用 jQuery 而不是纯 javascript。所以你可以使用.click
. 可能值得尝试使用另一种方式来实现您想要的:
( function( $ ) {
$(document).ready(function () {
$(".element").click(function (e) {
e.preventDefault();
// any code here
});
});
}( jQuery ) );
以下是更多信息:https ://api.jquery.com/click/
但是如果你喜欢使用纯 javascript,你可以使用for
每个元素,比如:
window.onload = function () {
element = document.querySelectorAll(".element");
for (var i = 0; i < element.length; i++) {
element[i].addEventListener("click", function (e) {
e.preventDefault();
// any code here
});
}
};
推荐阅读
- sql-server - 违反 PRIMARY KEY 的数据流
- scala - SBT 发布:未指定发布的存储库
- vue.js - 如何使用 Vuejs 处理输入文本框上使用特殊字符的警告
- javascript - 在 js 或 Jquery 中恢复 removeAttr
- python - 如何评估 DataFrame 中包含的逐行表达式(如 df.eval() 但动态)?
- sql - 如何在 SQL Server 中创建存储过程?
- amazon-web-services - 在 S3 存储桶文件夹中托管静态网站
- ansible - 如何使用 Ansible playbook 从 nexus 下载工件到远程机器
- http - HTTP POST 数据内容长度
- java - WebRTC 在通话期间开始/停止录音