jQuery click function not triggering on link

Question

i'm trying to add some navigation arrows which allow the user to go to the next/prev link in a list.

I'm having trouble getting jQuery to fire the click event on the next link when the arrow is clicked.

I've set up a test using addClass() and I can see that jQuery is referencing the right link because it adds the class to it, it's just not triggering the click event on it.

HTML:

<ul class="menu">         
     <li class="active">
            <a href="#thelink#">Link text</a>
      </li>
      <li>
            <a href="#thelink2#">Link text 2</a>
      </li>
      <li><a class="next-page" href='#'>></a><li>
</ul>

jQuery:

$jQ(".menu a.next-page").click(function() {         

  $jQ('.menu li.active').next().find('a').addClass('test');

  $jQ('.menu li.active').next().find('a').click();  

});

Using this code, when I click on the next arrow it adds the class 'test' to the link in the second list item, but the link is not clicked.

Triggering clicks on as is often heavily restricted by browsers' security settings. The syntax seems ok (apart from the weird $jQ, but it seems to be working). — m90
– m90, Commented Apr 11, 2012 at 8:37
Even if not for security settings, it's not a good way to abstract this. One thinks to themself, "I want this to do the action that happens when I click it," but I would resist this temptation and explicitly call the action from within the event. — Greg Pettit
– Greg Pettit, Commented Apr 11, 2012 at 8:41

Greg Pettit · Accepted Answer · 2012-04-11 09:06:51Z

This is a pretty convoluted example (since I'm not sure of everything that needs doing on your clicks) but it didn't seem right to leave it at a comment:

http://jsfiddle.net/MNczS/1/

var doStuff = function(obj) {
    alert("I did the stuff related to " + obj.attr('href') + "! Woot!");
};

$('a').not('.next-page').on('click', function(e) {
    e.preventDefault();
    doStuff($(this));
});

$(".menu a.next-page").on('click', function(e) {
    e.preventDefault(); 
    $nextAnchor = $('.menu li.active').next().find('a');
    doStuff($nextAnchor);
});

The silly doStuff() function just represents something that happens on click. Notice that I bind certain behaviour to all anchor tags (except next-page anchors!) and other behaviour to the next-page anchor. Ultimately they both do the same thing: fire doStuff for the object in question. But in theory you could have them do different things before and/or after the shared functionality of doStuff().

WolvDev · Accepted Answer · 2012-04-11 08:38:29Z

0

try to use this:

$jQ('.menu li.active').next().find('a')[0].click();

answered Apr 11, 2012 at 8:38

WolvDev

3,2362 gold badges19 silver badges32 bronze badges

Comments

A.Zaben · Accepted Answer · 2012-04-11 09:41:06Z

0

Use Trigger, to trigger any event you want http://api.jquery.com/trigger/

$('li a.next-page').click(function() {
    $('li.active a').trigger('click');
});

So basically using your code it should be

$jQ(".menu a.next-page").click(function() {         

  $jQ('.menu li.active').next().find('a').addClass('test');

  $jQ('.menu li.active').next().find('a').trigger('click');  

});

edited Apr 11, 2012 at 9:41

answered Apr 11, 2012 at 9:36

A.Zaben

6916 silver badges10 bronze badges

Comments

Stian · Accepted Answer · 2012-04-11 10:06:23Z

0

sometimes click doesn't trigger try:

$jQ(".menu a.next-page").live("click",function() {           
  $jQ('.menu li.active').next().find('a').addClass('test');
  $jQ('.menu li.active').next().find('a').click();  
});

or

$jQ(".menu a.next-page").on("click",function() {           
  $jQ('.menu li.active').next().find('a').addClass('test');
  $jQ('.menu li.active').next().find('a').click();  
});

answered Apr 11, 2012 at 10:06

Stian

457 bronze badges

Collectives™ on Stack Overflow

jQuery click function not triggering on link

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related