Why isn't my row getting added to my table?

I am using this article to create a way for users to enter in multiple rows on a single entry form. The difference of what the author is doing and what I am doing is that I am putting my fields into a table. The problem I have is that I am not getting new rows inserted into my table. My guess is that the script isn't finding #editorRows but since I am still only learning jQuery I am not 100% sure.

My HTML showing only relevant parts

<fieldset>
    <legend>Request Details</legend>
    <table>
        <tbody id="editorRows">
            <tr><th>Date</th><th>Time</th><th>Hours Requested</th><th>Request Type</th><th></th></tr>
            <tr class="editorRow">
                <td>...</td>
                <td>...</td>
                <td><a href="#" class="deleteRow"><img src="../../images/site_icons/16/69.png" title="Delete" alt="Delete" border="0" /></a></td>
            </tr>

        </tbody>
    </table>

    <p><a href="/LeaveRequest/BlankRequestedDayRow" id="addItem">Add Day</a></p>
</fieldset>

My jQuery Code:

<script type="text/javascript">
    $(document).ready(function() {
        $("#addItem").click(function() {
            $.ajax({
                url: this.href,
                cache: false,
                success: function(html) { $("#editorRows").append(html); }
            });
            return false;
        });
        $("a.deleteRow").live("click", function() {
            $(this).parents("tr.editorRow:first").remove();
            return false;
        });
    });
</script>

The code in /LeaveRequest/BlankRequestedDayRow is being called, so my guess is that the code doesn't know where to put it. BlankRequestedDayRow adds:

            <tr class="editorRow">
                <td>...</td>
                <td>...</td>
                <td><a href="#" class="deleteRow"><img src="../../images/site_icons/16/69.png" title="Delete" alt="Delete" border="0" /></a></td>
            </tr>

The full code of BlankRequestedDay as requested:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<EmployeePayroll.ViewModels.LeaveRequestRow>" %>
<%@ Import Namespace="EmployeePayroll.Helpers"%>

<tr class="editorRow">
    <% usi开发者_开发问答ng (Html.BeginCollectionItem("requestedDays"))
       { %>
        <td><%= Html.HiddenFor(model => model.DaysRequested.RequestId) %><%= Html.EditorFor(model => model.DaysRequested.DateOfLeave.Date)%></td>
        <td><%= Html.EditorFor(model => model.DaysRequested.DateOfLeave.TimeOfDay)%></td>
        <td><%= Html.TextBoxFor(model => model.DaysRequested.HoursRequested, new { size = 6 })%></td>
        <td><%= Html.DropDownListFor(model => model.DaysRequested.RequestType, 
            new SelectList(Model.LeaveRequestType, "Value", "Text", Model.DaysRequested.RequestType), "(Select)")%></td>
        <td><a href="#" class="deleteRow"><img src="../../images/site_icons/16/69.png" title="Delete" alt="Delete" border="0" /></a></td>
    <% } %>
</tr>

Did you check if you're ajax call returns something ?

With firefox, you can use firebug's console to inspect the call.

mike, much as you have with the $("a.deleteRow").live("click", function()), you may have to do the same to the $("#addItem").click(function() {}) portion as well, i.e.

 $("#addItem").live('click', function() {

might be worth gving that a try... tho' might not be so, as i haven't tested it but is certainly a possibility.

also, take a look at using:

$('#editorRows tr:last').after(html);

as an alternative. Plus, one last ditch, put an id on the table and try all of the above against the table, rather than the tbody.

[edit] - If you have no rows, there will be no tbody unless you have specified one yourself. the tbody only get's attached to the DOM automatically in the presence of existing rows.

The problem I had was an error was being returned after calling my action in the controller. I was returning the wrong object type. After fixing that, it worked. Thanks all for getting me on track!