Trigger javascript in href attribute with jQuery .click() (or similar)

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?