如何在 Elementor 中向弹出窗口添加点击事件？答案

【问题标题】：How can I add a click event to popup in Elementor?如何在 Elementor 中向弹出窗口添加点击事件？
【发布时间】：2021-01-31 10:18:42
【问题描述】：

使用 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" 停止在第一个元素为 "element" 类。检查您的元素是否是“元素”类的第一个元素。如果不是。尝试改用 ID。例如：const element = document.getElementById("#my-id").

标签： javascript wordpress popup elementor

【解决方案1】：

我认为问题可能在于您使用的是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
    });
  }
};

【讨论】：