CODEWITHSUNDEEP
jquery
jd182
jd182

Reputation: 3260

jQuery click function not triggering on link

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.

Upvotes: 0

Views: 1170

Answers (4)

Stian
Stian

Reputation: 45

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();  
});

Upvotes: 0

A.Zaben
A.Zaben

Reputation: 681

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');  

});

Upvotes: 0

Greg Pettit
Greg Pettit

Reputation: 10830

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

Upvotes: 2

WolvDev
WolvDev

Reputation: 3226

try to use this:

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

Upvotes: 0

Related Questions