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.

Answer 1

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().