[Resolved] jquery click event not working with dropdown menu element

[gingerdesign]

Hi, I’m trying to add an event click on dropdown menu element

jQuery(‘#menu-item-518 a’).click(function(){alert(‘clicked’)});

This is working in Firefox but not in chrome or safari.
The problem seems to be in the dropdown-click.js, in fact if I remove it through the chrome console, it works.

Do you have any suggestion?

Many thanks

[Elvin]

Hi there,

Can you link us to the page in question to have a look at it? You can use the private information text field to provide the link. 🙂

[gingerdesign]

Hi Elvin,
thanks, I’m sending you the link in private.

Francesco

[Elvin]

I’ve tried accessing the link provided but I’m getting a “This site can’t be reached” error.

Can you verify/confirm if the site is up and running? Perhaps it’s on maintenance? Let us know. 😀

[gingerdesign]

It is in maintenance mode, I sent you user and password to log in

[David]

Hi there,

can you check the login and password as it doesn’t work for me.

[gingerdesign]

Sorry! Try these

[Tom]

Hi there,

Where can I find menu-item-518? I’m not seeing that one on the page.

It’s possible that the dropdown click javascript is overriding your own javascript. How are you adding yours?

[gingerdesign]

Hi Tom,
the problem was exactly that. We added our javascript in a hook in wp_footer using elements.
Now we have solved the problem changing the event from click to mousedown and it is working.
Just in case it appens again something similar, is there any method to give priority to our javascript?

[David]

Hi there,

the general rule with Javascript priorities is first come first served.
So if you registered 2 x onclick events for example eg.

$('a').on('click', function(some-function)....)
$('a').on('click', function(some-other-function)....)

The first script would fire first.

However that only applies if the target element the onclick is bound to are the same. In the example above they are both the <a> element. So first come first served applies.

So in theory if your scripts are hooked in before the GP script it should be fired first. You can do that by reducing the Hook elements priority.

However if the bindings were to different elements then event propagation and bubbling comes into play.
For example:

$(document).on('click', 'a', function(some-function)....)
$('a').on('click', function(some-other-function)....)

In the first line we bind to the document which is a parent node. And event propagation commences with the deepest buried node which in this case would be the second script.

See here for more info on this mind bending stuff lol:

https://javascript.info/bubbling-and-capturing

[gingerdesign]

Ok, thanks a lot for the help!

Francesco

[David]

Glad we could be of help.

[Author]

Posts