How to click the anchor using JQuery so that the href is also called?

Question

I have an anchor and a text box as below:

 <div id="container">
        <input type="text" id="textBox" />       
        <a id="anchorTest" href="javascript: alert('inside anchorTest')">Click me</a>
    </div>

I'm trying to make the default button to the anchor when the enter key is clicked:

$(document).ready(function () {

            $('#anchorTest').click(function () {
                alert('clicked');
            });

            $('#container').keyup(function (e) {

                if (e.keyCode == 13) {                    
                    $('#anchorTest').triggerHandler('click');
                }
            });
        });

But the anchor href javascript is never called?

How to click the anchor using JQuery so that the href is also called?

I used the below code and it worked but is there any better way as it submits the form whereas I'd like to have a pure javascript code:

window.location = $('#anchorTest').attr('href');

Thanks

You should not put js in href. Do it with onClick instead. And I don't get what you are asking. You want the same thing to happen when you press enter in the textbox as when you click the link? — OptimusCrime, Oct 18 '11 at 11:37

score 4 · Answer 1 · edited May 23 '17 at 11:44

jQuery handles the click event on anchor tags in a 'special' way. See this question for further information - 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?

From the question above -

I did some research and it seems that the .click is not suppose to work with 'a' tags because the browser does not suport "fake clicking" with javascript. I mean, you can't "click" an element with javascript. With 'a' tags you can trigger its onClick event but the link won't change colors (to the visited link color, the default is purple in most browsers). So it wouldn't make sense to make the $().click event work with 'a' tags since the act of going to the href attribute is not a part of the onClick event, but hardcoded in the browser.

it's not just JQuery, with DOM that would behave in the same way. — The Light, Oct 18 '11 at 16:20

score 0 · Answer 2 · answered Oct 18 '11 at 11:31

0

Change your "triggerHandler" to just "trigger" and see if that resolves your issue.

I think triggerHandler bypasses the standard behavior and executes the "onclick" event handler in your case which is not set.

answered Oct 18 '11 at 11:31

Dave G

9,639
36
41

Sedat Başar · Answer 3 · 2011-10-18T11:54:11.640

0

if (e.keyCode == 13) {                    
      $('#anchorTest').click();
}

Check from here http://jsfiddle.net/amBXV/

edited Oct 18 '11 at 11:54

answered Oct 18 '11 at 11:35

Sedat Başar

3,740
3
25
28

No, it didn't say "inside anchorTest" when I hit Enter inside the text input. [Chrome 14] – Halil Özgür Oct 18 '11 at 11:59
yeah, that just explains the problem not the solution. – The Light Oct 18 '11 at 12:39

How to click the anchor using JQuery so that the href is also called?

3 Answers3