How to catch click in wordpress menu item-CodePudding

I'm trying to add and click event listener to a menu item in my Wordpress main menu through the css class name.

The menu item looks as follows:

<li >

Kontaktieren Sie uns

I'm using the following code:

(function($) {
   $(document).ready(function() {
     $(document).on('click', '.custom-menu-button', function(event){
       alert("caught");
     });
   });
})(jQuery);

The code works on a link with :

<a  href="">In den Warenkorb</a>

Thank you all!

CodePudding user response：

It seems that your jQuery code is targeting the <li> element instead of the actual link. A slight correction to target the <a> element might do the trick here:

(function($) {
 $(document).ready(function() {
     $(document).on('click', '.custom-menu-button a', function(event){
       alert("caught");
     });
   });
})(jQuery);

CodePudding user response：

I found the problem. The linch inside the <li> tag was referring to an anchor which existed. I suppose browser must have overridden the jquery function because of that.