jQuery problem, jQuery takes over all links on page

Question

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function() {
        $("#results").load( "jquery-routing.php", { pageNo: $(this).text(), sortBy: $("#sortBy").val()} );
        return false;
    });
});    
</script> 

  <div id="results"> </div>    
<a href="jquery-routing.php?p=1">1</a>
<a href="jquery-routing.php?p=2">2</a>

that code works fine, only problem that after I run it all my a href links stop to work! The links become jquery ajax calls.. why?

Answer 1

You're $("a") selector matches all <a ...> tags, you need to change it to something more specific:

$("a#someid")
$("a.someclass")
$("div#somecontainer a")

Answer 2

Your setting the onclick event of all anchor tags on the page. Try only selecting the link that you want instead of the more general $("a")

Answer 3

To target specific links, use the id or class tag on your anchor tags. E.g.

<a class="link1" href=""></a>
<a id="link2" href-""></a>

Do note that id tags are unique within a page and can only be used once. Reference those links in jQuery using:

$('a.link1').click(function() {}
$('#link2').click(function() {}

or you can combine both:

$('a.link1, #link2').click(function() {}

What you need to do is assign an id or class tag to the link that will call the ajax request. E.g. <a class="ajax" href="">ajax</a> and referencing it with $('a.ajax').click(function () {}

Answer 4

Your selector $("a") indicates all the hiperlink in your page.

You may need to give a specific id to the hiperlink where you want your ajax call to work and then change the selector based on that.

ex:

<a id= "my-link" href="" >ddd</a>

$("a#my-link").click()