"onclick" event not working in FF and Chrome

Question

I have some SVG paths inside a div with an onclick attribute:

<path class="limbs" id="limb1" d="some coordinates here" onclick="open(1)" />

The open() function is defined in a seperate JS file, which is implemented just before the body tag (like the jQuery file as well):

function open(n) {
    $("#information").fadeIn();
    $("#info" + n).fadeIn();
}

div#info1, for example, is an information box inside div#information, a full screen semi-transparent black background (gives it a lightbox-like effect).

Everything works well using Safari. However, if I try it with FF or Chrome, the browser seems to load a new page when I click (which shouldn't happen) and it results in a blank screen with no source code.

Page can be seen here: frank.schufi.ch/3dmapping

Answer 1

there are some mismatch behaviors between browsers so this could be the why it happens and for the what, it seems to me other open(n) function is being called. try change the function name, to let say:

newOpen(n)

see if it helps.

Answer 2

As Haocheng commented, a more up to date way of doing this is making an event handler for clicking the path. You would basically reach the same goal having this jQuery snippet instead:

$('.limbs').click(function() {
    $("#information").fadeIn();
    $("#info" + $(this).attr('id')).fadeIn();
});

I'm not sure if this will make a difference in the outcome, as someone pointed out it might have to do with the fact that you named your function open(), so it might. What I would suggest you trying if you're still having problems, is adding a preventDefault(), like this:

$('.limbs').click(function(event) {
    event.preventDefault();
    $("#information").fadeIn();
    $("#info" + $(this).attr('id')).fadeIn();
});

This removes default behaviour from HTML. For example, if .limbs would be a attached to an <a> elements, it would prevent the standard behaviour of following that link. Then again, renaming the function to newOpen() might be enough as well. :)