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

开发者_C百科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.

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?

Set window.location to the href value.

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

DEMO: http://jsfiddle.net/dmSUm/

I'd just finished typing this up when I saw Milimetric's answer . Here's the code anyway for what it's worth -

eval($('#horribleLink').attr('href').replace('javascript:',''));

Use the native Javascript click method and you've got yourself a working click!

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

I kept the jQuery click assuming that Javascript click will bypass jQuery triggers in which case you'll want to keep both. Otherwise, if I'm wrong (or you don't need to account for trigger) you can reduce it to:

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

If I understand correctly the question, the issue is that you have something like this:

 <a href="javascript:alert('hello');" onclick="javascript:alert('clicked');">Test</a>

And you claim that when the javascript is on the href, the onclick event is not fired. Correct? If so, what I am seeing is that both get fired, first onclick and then the javascript inside href.