I'm new to Ajax and wondered if anyone could point me in the right direction.

I have a Wordpress theme which used Ajax to filter out search results. This was working fine until I introducted jQuery toggleslide to hide some of the categories in the search results (as there were 100's of categories).

In my html I have area that I click called "button" and this reveals the area called "results".

I've added this code to the header of my page and the toggleslide works great, but the problem is, when I click on one of the results to refine the search results the page reloads, as opposed to showing a "loading" sign.

If I delete the code then the "loading" sign works but the toggleslide 

```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){

  $("#button").on("click",function(){
    $("#results").slideToggle("slow");
  });

});
</script>

```

I've looked into this and people suggest using the preventdefault() command so I tried this:

```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){

  $("#button").on("click",function(e){
    $("#results").slideToggle("slow");
  });

e.preventDefault();

});
</script>

```

Again the toggleslide works fine but the AJAX doesn't.

If anyone could help i'd really appreciate it.

Thanks
Chris

---------Update-----------

Thanks for the replies, unfortunately none of the below worked, i've also tried:

```
live("click",function())
click(function())

```

with no success.

I'll be able to paste other code tomorrow but i'm unsure this will be relevant? The reason been, if I remove the code above everything works as it should, therefore the above code is causing the issue? But I am new to this so appreciate you're help

Cheers
Chris