2

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.

Community
  • 1
  • 1
Mohammed H
  • 6,880
  • 16
  • 81
  • 127
  • See it in action http://jsfiddle.net/zZqQs/ – Mohammed H Oct 18 '12 at 06:53
  • 1
    check this http://jsfiddle.net/ZeSdV/5/ its working fine.. – Codegiant Oct 18 '12 at 06:57
  • @habeebperwad your fiddle works in chrome – karaxuna Oct 18 '12 at 07:03
  • @karaxuna I tried the OP's fiddle in Chrome, it doesn't work. Clicking on the DIV displays the alert, but doesn't link to example.com. Clicking on the A displays the alert and links to example.com. I think the intent is that clicking on the DIV should be exactly like clicking on the A. – Barmar Oct 18 '12 at 07:18
  • The jQuery `click()` function only runs handlers on anchors that have been bound to the element, it doesn't invoke the browser's default action. There are lots of past questions about this, see the Related list in the sidebar. – Barmar Oct 18 '12 at 07:25
  • Instead of showing the interest to close the question, you could help me to solve the issue. I checked several questions. But I couldn't find any solution. So I asked here. It seems that stackoverflow is an encyclopedia not QA-site. – Mohammed H Oct 18 '12 at 08:59

3 Answers3

3
<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.

karaxuna
  • 26,752
  • 13
  • 82
  • 117
  • What is the reasoning behind using vanilla JavaScript if you are already in a jQuery function. – Lix Oct 18 '12 at 07:38
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 -

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

Lix
  • 47,311
  • 12
  • 103
  • 131
1
<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>
ARUNRAJ
  • 469
  • 6
  • 15