Link not working: No console errors?

I’m using the LightGallery javascript plugin, which has a social media share function built in.

When I click the share-button, nothing happens. What should happen is the Facebook/Twitter share tool should open in another tab.

The think is that the link in the <a> is correct. If I cut/paste it into a browser tab, the Facebook share tool loads, like it should. I tried disabling all plugins, still doesn’t work. I would try a different Wordpress theme, but the Gallery is built into the theme itself, so that won’t work, obviously.

Try it here

This would seem to be a js problem as I think the gallery is stopping the anchors from working.

A quick (uneducated fix) would be to add an inline click handler to stop propagation on each of those social anchors. i.e. onclick="event.stopPropagation();"

e.g. here’s it added to the facebook link.

<a onclick="event.stopPropagation();" class="lg-share-facebook" rel="noopener" target="_blank" href="//www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcoosguide.com%2Fmeasure-6-196%2F%23lg%3D1%26slide%3Dcoos-county-voting"><span class="lg-icon"></span><span class="lg-dropdown-text">Facebook</span></a>

That seems to work but however there are further issues in that you have wrapped that dropdown in a button element. A button element is not allowed to hold interactive content like anchors. Its would be the same as nesting anchors inside an anchor and makes no logical sense. A button is an action that has one action and not multiple actions.

You would need to use a div or some other element to wrap that social dropdown.

It may work if you leave it as it is but is not guaranteed to work and is invalid. Some browsers may let it work and some may not.

I will move this thread to the JS forum anyway so that the JS gurus can give you a better answer than my quick fix as inline event handlers should be avoided at all costs. :slight_smile:

1 Like