jQuery event processing and the ready function

Question

Hi,

I am very new to jQuery (I started this morning) and I am confused about exactly what triggers the function supplied to the ready function, to be executed.

According to the jQuery documentation [http://docs.jquery.com/Events/ready#fn%5D the ready function

Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.

What events can cause a DOM tree to be ready to be traversed? Specifically, I apply the ready function to the entire document tree:

<script type="text/javascript">
    $(document).ready(function(){

     $("p + p").hide ();

     $("a").click(function(event){
      $("p + p").toggle ();
      event.preventDefaults ();
     });

    });

</script>

It seems that this function is called not only when the page first loads but subsequently as a consequence of clicking the hyperlink.

The html has a number of paragraphs and the $("p + p").hide (); causes all but the first to be hidden when the page loads. I have a hyperlink, embedded in the first paragraph, that I want to be used to display the remaining paragraphs.

However, it seems that clicking the hyperlink (<a href="">Read more...</a>) causes the function supplied to ready to be executed again, thus hiding my paragraphs immediately after they have been displayed.

Is it the case that the action inside the click causes the entire document DOM to become ready to be traversed again? Or is the entire page reloaded by the browser? Any insights would be greatly appreciated.

Kind regards,

Owen.

Answer 1

From a quick skim I noticed a typo in that the method you want to invoke is

event.preventDefault()

The method you are feeding to the ready event isn't being fully executed all over again, I think it's doing what it should by the .toggle event handler you have setup.