Question 30442 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to catch click in wordpress menu item

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 class="custom-menu-button menu-item menu-item-type-custom menu-item-object-custom menu-item-5404">

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 class="custom-menu-button":

<a class="et_pb_button et_pb_button_0 custom-menu-button et_pb_bg_layout_light" href="">In den Warenkorb</a>

Thank you all!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search