如何在Elementor中将单击事件添加到弹出窗口？

Question

使用WordPress和Elementor页面构建器，我创建了一个导航菜单弹出模板。我想要淡入子菜单项，并在单击带有子菜单的菜单项时隐藏菜单。

当我将JavaScript代码添加到弹出窗口(使用附加组件)时，eventlistener函数不起作用，但我的代码运行良好。我在简单的页面中使用它，但不是在弹出窗口本身中；我尝试了(自定义CSS和JS)插件，它也不起作用。是Elementor中的bug，还是无法以通常的方式为弹出窗口中的元素添加侦听器？

代码：

const element = document.querySelector('.element');

console.log(element);  < ------------------------------here is working!!!

element.addEventListener('click', function(){
    any code in here <---------------------------------------not working !
});

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