0

I have a structure that looks like this...

<ul class="flex-direction-nav">
   <li>
    <a class="prev" href="#">Previous</a>
   </li>
   <li>
    <a class="next" href="#">Next</a>
  </li>

Using JQuery, how would I target those links so I can do something when the user clicks it.

Thanks

EDIT: Maybe I should note that the text is not visible, but rather indented -9999px and the background image is in it's place. I tried a couple of these but I'm not getting the alert that i'm looking for.

patricko
  • 831
  • 4
  • 16
  • 34

6 Answers6

4
$('.flex-direction-nav a').on('click', function(){
    // A link was clicked
})

A simple Fiddle demo here.

Colin Brock
  • 21,267
  • 9
  • 46
  • 61
  • Just note that .click function is a shortcut for .bind("click", handler), as well as for .on("click", handler) as of jQuery 1.7. Also See -> http://stackoverflow.com/a/8601512/297641 – Selvakumar Arumugam Feb 29 '12 at 22:58
  • `$('.flex-direction-nav a').on('click', function(){ alert("THIS IS AN ALERT!"); });` But I'm not getting an alert... Could it be because there is no text in the link, but rather the text is indented -9999px and there is a background image... – patricko Feb 29 '12 at 22:58
0
$('.flex-direction-nav').find('a').click(function(){
    // Do something
});
elclanrs
  • 92,861
  • 21
  • 134
  • 171
0

Try below,

$('.flex-direction-nav li a').click (function () {
    if ($(this).hasClass('prev')) {
        //do prev
        alert('prev clicked');
    } else if ($(this).hasClass('next')) {
        //do next
        alert('next clicked');
    }
});

DEMO

Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134
0
$(".flex-direction-nav .prev").click(function(){
    //do stuff for prev button here
});
$(".flex-direction-nav .next").click(function(){
    //do stuff for next button here
});
okcoker
  • 1,329
  • 9
  • 16
  • This isn't working... The text is being indented off screen, and the background image is an arrow. This is also for a slider if that makes any difference. – patricko Feb 29 '12 at 23:10
0
$(".prev").click(function() {
  alert("You clicked prev!");
});


$(".next").click(function() {
  alert("You clicked next!");
});

..

Or of course:

$(".flex-direction-nav a").click(function() {
   alert("You clicked a link in the navigation ul.");
});
Ted
  • 7,122
  • 9
  • 50
  • 76
  • This isn't working... The text is being indented off screen, and the background image is an arrow. This is also for a slider if that makes any difference. – patricko Feb 29 '12 at 23:08
0

try 

//first link
$("ul.flex-direction-nav a.prev").click(function(e){
//code to be executed
});

//second link
$("ul.flex-direction-nav a.next").click(function(e){
//code to be executed
});

where "e" parameter is the event object http://api.jquery.com/category/events/event-object/ I would recomend to replace the href value form "#" to "javascript:void(0)", to avoid triggering the scrollbars

Liviu
  • 452
  • 1
  • 5
  • 14
  • This isn't working... The text is being indented off screen, and the background image is an arrow. This is also for a slider if that makes any difference. – patricko Feb 29 '12 at 23:03