JQuery Event not firing adter being attacjed
===

Ok, Im using Razor and jquery 1.5.1 if that affects the answer.

I have some simple jquery I copied from another post on this site. I have a variable number of sections that are rendered using the Razor engine.

I wan't to be able to hide / display the data under each section (which is wrapped in a div.)

so the HTML is

    <div>Course 1<a class="toggle" href="javascript:void(0);">Click</a>
    <div class="contentHidden" style="display:none;"> content here </div></div>
    <div>Course 2<a class="toggle" href="javascript:void(0);">Click</a>
    <div class="contentHidden" style="display:none;"> content here </div></div>
    
And the jquery is;

    <script type="text/javascript">
    $(document).ready(function(e) {
      $(".toggle").click(function (e) {
        e.preventDefault();
        $(this).children("div").toggle();
      });
    });


The jquery is at the bottom of the view, and I have added in the document.ready bit to ensure that the <a> tags do exist.

One thing I have considered is that I am creating the page content using the razor @foreach(), however that must happen at the server before the content is streamed to the browser, so I don't believe that I am doing this before the <a> links are created, and shouldn't need to use live or a delegate.

But I'm stuck now, so can anyone suggest how I can track this down (or better yet fix it :-)