call jquery function within "a" tag "onclick"

Question

here is my code:

<a href='P001' class='basic'>Read More</a><br>
<a href='P002' class='basic'>Read More</a><br>
<a href='P003' class='basic'>Read More</a><br>

my script:

$('.basic').click(function(id){
   $.ajax({
       url: 'display_pro.php?id='+$('.basic').attr('href'),
       success: function(data) {alert(data);}
   });
});

when i click all links it's always get the 'P001'. what is the problem? Thanks for your help.

Answer 1

$('.basic').click(function(e) {
   var link = this; // <-- best practice
   $.ajax({
       url: 'display_pro.php?id=' + link.href, // use link here...
       success: function(data) {alert(data);}
   });
   return false; // <-- needed, prevents page from jumping into another page..
});

Answer 2

Instead of +$('.basic').attr('href') you should do:

$(this).attr('href')

Otherwise, you are asking again for the set of items with the class as "basic" and grabbing the value of the first one. $(this) (or e.target) ensure you are getting the currently clicked item. Also, FYI, the argument passed to the function is not id--it is an event object.