Javascript not being called in @Html.ActionLink
===

I have the following javascript test.js file:

    $("#addItem").onclick(function () {
        alert("yup");
        $().ajax({
            url: this.href,
            cache: false,
            success: function (html) { $("#bandRows").append(html); }
        });
        return false;
    });

That I want to use to inject some HTML into the "bandRows" div on a page.  I'm using Razor in an MVC 3 app like so:

**The Index View**, which contains the link that, when clicked injects a partial view HTML:

    @model IEnumerable<TariffBand>
    
            <script type="text/javascript" src="=@Url.Content("~/Scripts/jquery-1.3.2.js")"></script>
            <script type="text/javascript" src="=@Url.Content("~/Scripts/MicrosoftAjax.js")"></script>
            <script type="text/javascript" src="=@Url.Content("~/Scripts/test.js")"></script>
    
        <h2>Index</h2>
        
        @using (Html.BeginForm())
        {
        <div id="bandRows">
            @foreach (var band in Model)
            {
                Html.RenderPartial("BandEditorRow", band);
            }
        </div>
        
        @Html.ActionLink("Add band...", "Add", null, new { id = "addItem" })
    
        <input type="submit" value = "Done" />

At the moment, when I click on the link the javascript is not being called - the alert box is not being displayed - and the link just navigates to the "Add" partial view rather than injecting it into the 'bandRows' div.

Can anyone tell me why?  I haven't used javascript before so I've obviously done something daft but can't work it out for the life of me.

Thanks
David