JavaScript inside the A HREF keeps jQuery function from working

Question

I'm using a WordPress plugin to display a list of locations and a map of those locations.

I created the following function so that a link will scroll to a map when a link is clicked.

 jQuery(document).ready(function($) {
    $(".wpgmp_location_title h3 a").click(function() {
        $('html, body').animate({
            scrollTop: $("#map-selected").offset().top
        }, 2000);
    });
});

However, the plugin automatically adds the following to each link:

href="javascript:open_current_location(marker2259map2)">

This link causes the map-marker to open, however, it appears to be preventing the jQuery function from scrolling the page to the top of the page.

Any ideas how to overcome this?

do you have control over the HTML? you could remove the function from the HTML and call it at the end of your scrolling function so that when users clicks, you scroll to the correct map and open the current location selected... — blurfus, Jul 15 '15 at 21:21
You could loop through all the links, copy the ref to a variable, strip the "javascript:" part, remove the href, and eval the variable in your click event (unless you don't want to open the marker) — Julien, Jul 15 '15 at 21:22
I have access to the HTML, however, it is a WordPress plugin so I'd prefer not to modify the files as they will be overwritten when the plugin is updated. — JeremyE, Jul 15 '15 at 21:35

score 0 · Answer 1 · answered Jul 15 '15 at 21:21

0

You need to cancel the default event inside your click handler:

jQuery(document).ready(function($) {
    $(".wpgmp_location_title h3 a").click(function(event) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $("#map-selected").offset().top
        }, 2000);
    });
});

Fiddle

answered Jul 15 '15 at 21:21

pdoherty926

9,895
4
37
68

Unfortunately, this doesn't appear to work with the function. The site still doesn't scroll when the link is clicked. – JeremyE Jul 15 '15 at 21:35
In fact, preventDefault appears to keep scrollTop from working in any instance. – JeremyE Jul 15 '15 at 21:45

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

An approach could be to override the open_current_location() function. Take a look at this example, you could also execute the scrolling and then the original behaviour of open_current_location()

edited May 23 '17 at 12:21

Community

1
1

answered Jul 15 '15 at 22:27

MazzCris

1,812
1
14
20

JavaScript inside the A HREF keeps jQuery function from working

2 Answers2