11

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.

Improve this question
3
  • For the beginning, can you check the syntax? onclick="doSomething() should be onclick="doSomething()" Commented Aug 3, 2011 at 13:40
  • Shouldn't href="javascript:doSomething" be href="javascript:doSomething()"? Commented Aug 3, 2011 at 13:41
  • 1
    Fixed - they were just typos in my examples, not the real code. Commented Aug 3, 2011 at 13:47

5 Answers 5

Reset to default
10

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?

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

I realize this is awful in terms of security, but the setup kinda forces you to do it I think.
That's the workaround I've got at the moment - it works fine, but I'd really like to understand what's going on, too.
The accepted answer here goes into a little depth: stackoverflow.com/questions/1694595/…. Basically, it seems you can't do a click() on a link because the browser doesn't support fake clicking.
Third work around: jsfiddle.net/FKaYR (injecting <form> into the document, setting its action) though it's very much like changing the location.href thus only giving it as comment.
As far as I can tell, eval() is no worse from a security point of view than a javascript: href attribute. Anyone who can pass in something nasty to eval could just as easily re-write the href attribute and have their code executed that way. Both methods have the same privileges, I think.
|
3

Set window.location to the href value.

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

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

Improve this answer

3 Comments

Interesting approach! I can see why this works, but it feels even ickier to me than the eval method.
@Beejamin: Don't know which method is better, I just prefer to avoid eval.
slight emendation to accommodate all three types of links: jsfiddle.net/dmSUm/2
2

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:',''));
Improve this answer

1 Comment

Thanks - this is what I'd resorted to before I asked the question (I should probably have mentioned). I'm hoping someone knows the why, too.
0

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();
});
Improve this answer

Comments

-1

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.

Improve this answer

3 Comments

This is not the problem at all. The problem is he's trying to trigger the href action from another JavaScript function.
No - the links I'm working with have no onclick, only javascript inside the href. It doesn't fire when the click event is triggered programmatically.
@Beejamin I see what you mean.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.