Fire Click event in A-tag

Question

Possible Duplicate:
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?

I wrote the following code.

<div style="background-color:orange">Click me to open the link
    <br>
    <a target="_blank" href="http://example.com">Link</a>
</div>

<script>
    jQuery('div').click(function(){
        jQuery('a').click();
    });

    jQuery('a').click(function(e){
       alert('It came here!');           
       e.stopPropagation();
       return true;   
    });
</script>

But the link is not opening.

UPDATE: added target attribute to A-tag.

Solution 1

First of all, you are using a selector that will match all <a> tags on your page. Perhaps you want to give your <a> an id attribute so that you can target one specific element...

<a href="foobar.html" id="foo">foo</a>

You could also try use the trigger function to simulate a click on the element -

$('#foo').trigger('click');

One last thing to mention is that you didn't actually call the method to open the link. You can try use this code -

jQuery('a').click(function(e){
   alert('It came here!');
   window.open($(this).attr('href'));    
   return false;   
});

---

Reference -

• trigger()

Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

Solution 2

<div style="background-color:orange">Click me to open the link
    <br>
    <a id="b" href="http://example.com">Link</a>
</div>

jQuery('div').click(function(){
    document.getElementById('b').click();
});

fiddle: http://jsfiddle.net/zZqQs/4/

OR:

jQuery('a')[0].click();

Appears that jquery click and raw JS click differs from each other.

Solution 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>    
<div style="background-color:orange">Click me to open the link
    <br>
    <a href="http://example.com" target="_blank">Link</a>
</div>

<script>
    $('div').click(function () {
        $('a').click();
    });

    $('a').click(function (e) {

        alert('It came here!');
        e.stopPropagation();
        window.location = $("a").attr("href");
        return true;
    });
</script>

Comments

[Mohammed H]

Lix, To make the question simpler, I used the tag itself as selector.

[Lix]

@hab - Ok... It just looked a little strange :)

[Barmar]

The jQuery documentation says that .click() is equivalent to .trigger("click").

[Lix]

@bam - you are correct. But when things stop working, it never hurts to try different variants.

[Mohammed H]

See it in action jsfiddle.net/zZqQs/1 not working.

[Mohammed H]

I want to add 'target="_blank"' to the A-tag. will it work at that time?

[Lix]

@hab - it seems to be working for me... What exactly is not working? Do you not see the alert?

[Mohammed H]

@Lix, it is not opening the link.

[Lix]

@hab - perhaps that is because you didn't actually open any link... See this example. Clicking on both the link and the div work for me (in chrome)

[Lix]

What is the reasoning behind using vanilla JavaScript if you are already in a jQuery function.

[Mohammed H]

@Lix, great! Please update the answer with this code.