How can I add a click event to popup in Elementor?

Question

Using WordPress and Elementor page builder I created a navmenu popup template. I want to fade-in submenu items and hide the menu when clicking a menu item that has a sub menu in it.

When I add JavaScript code to the popup (using add-ons), eventlistener function doesn't work, but my code works fine. I use it in simple pages but not in the popup itself; I tried (custom CSS and JS) plugin it didn't work either. Is it a bug in Elementor or can't addevenlistener work for an element in the popup in the usual way?

Code :

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

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

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

Answer 1

I think the problem might be, that you are using querySelector . It returns the first Element within the document that matches the specified selector, or group of selectors.

With wordpress, you are able to use jQuery instead of pure javascript. So you are able to use .click . Might be worth a try using another way to achieve what you want:

( function( $ ) {
    $(document).ready(function () {
      $(".element").click(function (e) {
        e.preventDefault();
        // any code here
      });
    });
}( jQuery ) );

Here is some more information: https://api.jquery.com/click/

But if you like to use pure javascript, you can use for every element like:

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