jQuery - Imitate Click

Question

I want to imitate an anchor click when a user clicks on the containing <TD> but having problems.

This is the JS part:

$('contactTab').click(function() {
    $('contactTabLink').trigger("click");
});

And this is the HTML part:

<td class="previewTabs" id="contactTab">
<a class="previewTabLink" id="contactTabLink" rel="#contactOverlay">CONTACT</a>
</td>

When somebody clicks the <TD> contactTab, it should trigger a click event on <A> contactTabLink which then launches an Overlay. My problem is that the JS function with click listener is NOT firing at all.

Can anybody see where I am going wrong?

EDIT 1:

I have changed the selectors to have #'s but it still won't fire the function.

$('contactTab') will try to find an element with tag contactTab. You want the ID-selector. Triggering the click event won't make the browser follow the link though. — Felix Kling
– Felix Kling, Commented Jan 4, 2012 at 16:11
Yeah, you're missing the "#" in front of the IDs in your jQuery selectors. Use $('#contactTab'). and not $('contactTab') — Nick Bork
– Nick Bork, Commented Jan 4, 2012 at 16:11
where's the click listener defined for $('contactTabLink')? You have the click being triggered, but I don't see any listener defined for it, so there's no action to take on a click event. — tkone
– tkone, Commented Jan 4, 2012 at 16:12

nolabel · Accepted Answer · 2016-05-19 15:31:11Z

15

Your selector is not correct.

It should be this:

$('#contactTab').click(function() {

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

});

edited May 19, 2016 at 15:31

answered Jan 4, 2012 at 16:12

nolabel

1,1574 gold badges18 silver badges26 bronze badges

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

1 Comment

Barlow Tucker Over a year ago

Your second line is still missing the #

SLaks · Accepted Answer · 2012-01-04 16:11:43Z

1

Your selectors are wrong.
You need # for ID selectors.

answered Jan 4, 2012 at 16:11

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

quoo · Accepted Answer · 2012-01-04 16:13:30Z

1

Your selectors are wrong - you're using id's so you should have a '#' in front.

$('#contactTab').click(function() {
   $('#contactTabLink').trigger("click");
});

answered Jan 4, 2012 at 16:13

quoo

6,2971 gold badge22 silver badges36 bronze badges

Comments

Spudley · Accepted Answer · 2012-08-10 21:28:42Z

1

I think something to notice here, with the way your html is formatted, $('#contactTabLink').trigger("click") will cause $('#contactTab').click to fire since it is a parent of #contactTabLink, thus causing an infinite loop of recursion. Some browsers will print an error to the console or simply not respond. You could arrange your html accordingly to avoid this:

<td class="previewTabs" id="contactTab">
  <a href="javascript:;" class="previewTabLink">CONTACT</a>
</td>
<a class="previewTabLink" id="contactTabLink" rel="#contactOverlay"></a>

edited Aug 10, 2012 at 21:28

Spudley

169k39 gold badges240 silver badges309 bronze badges

answered Aug 10, 2012 at 17:07

Tommy

111 bronze badge

Comments

TheCarver · Accepted Answer · 2012-01-04 16:25:35Z

0

After adding hashes (#) to the selector, make sure that function is wrapped in $(document).ready(function() { yourFunction })...

$(document).ready(function() {
    $('#contactTab').click(function() {
        $("#contactTabLink").trigger("click");
    });
});

answered Jan 4, 2012 at 16:25

TheCarver

19.8k27 gold badges106 silver badges154 bronze badges

Collectives™ on Stack Overflow

jQuery - Imitate Click

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related