Question

Unfortunately, I’m working with some 3rd party javascript, which inserts links into my pages. Rather than just use these links as is, I want to use proxy elements, which, when clicked, trigger the click event on the 3rd party links.

The 3rd party links pack javascript into the href attribute, like this:

<a id="horribleLink" href="javascript:doSomething()">Click me</a>

My proxy element looks like this:

<button rel="horribleLink" class="linkProxy">No, click me</button>

And a bit of jQuery’d javascript to link them together:

$('button.linkProxy').click(function(){
    $('#' + $(this).attr('rel')).click();
});

Now, this works perfectly if the 3rd party link is just a standard link (<a id="horribleLink" href="http://www.google.com">Click</a>), or a slightly less horrible onclick (<a href="#" id="horribleLink" onclick="doSomething()">Click</a>), but when the javascript is inside the href attribute, triggering ‘click’ does nothing at all.

Can anyone tell me why, and if there’s a reasonable workaround?

Updated As Millimetric said, the root cause looks to be that browsers prevent ‘faking clicks’ on anchors – I’ve removed my ‘standard link’ example, as that’s another situation that doesn’t work. The onclick handler does work, though, as you’d expect.

Answer 1

The accepted answer here goes into a little depth as to “why this is happening”: Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?. Basically, it seems you can’t do a click() on a link because the browser doesn’t support fake clicking.

One Work-around:

If you set location.href for those cases, it works:

$('button.linkProxy').click(function(){
    location.href = $('#' + $(this).attr('rel')).attr('href');
});

Working fiddle: http://jsfiddle.net/uv29x/3/

Two Work-around:

You could just get the href of those links and do an eval() on them, right?