JQuery does not fire after updating a panel

JQuery does not fire after updating a panel

I have a an update panel like this:


  1. <asp:UpdatePanel ID="UpdateCost11" runat="server" autopostback="true">
                            <ContentTemplate>
                                <div class="rowContainerBorder" style="height: auto; text-align: center; clear: both;">
                                    <asp:Label ID="Label1" runat="server" EnableViewState="false" ForeColor="Red"></asp:Label>
                                    <asp:GridView ID="gvwProjectCost11" runat="server" AutoGenerateColumns="False" DataKeyNames="Id"
                                        ShowFooter="True" Width="100%" ShowHeader="true" Style="margin: 3px auto;" FooterStyle-Font-Bold="True" GridLines="None">
                                        <Columns>
                                            <asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" Visible="false" />
                                            <asp:BoundField DataField="ProjectId" HeaderText="ProjectId" SortExpression="ProjectId" Visible="false" />
                                            <asp:TemplateField HeaderText="Description" HeaderStyle-Width="70%">
                                                <ItemTemplate>
                                                    <%# Eval("ItemDescription")%>
                                                </ItemTemplate>
                                                <EditItemTemplate>
                                                    <asp:Label ID="Description" runat="server" MaxLength="50" Style="width: 90%;" Text='<%#Bind("ItemDescription") %>'></asp:Label>
                                                </EditItemTemplate>
                                                <HeaderStyle Width="70%" />
                                            </asp:TemplateField>
                                            <asp:TemplateField HeaderText="Cost" HeaderStyle-Width="20%"> 
                                                <ItemTemplate>
                                                    <%#FormatCurrency(Eval("Cost"))%>
                                                </ItemTemplate>
                                                <EditItemTemplate>
                                                    <asp:Label ID="Cost" runat="server" MaxLength="10" Style="width: 90%;" Text='<%#Bind("Cost", "{0:0.00}") %>'></asp:Label>
                                                </EditItemTemplate>
                                                <HeaderStyle Width="20%" />
                                            </asp:TemplateField>
                                            <asp:TemplateField HeaderStyle-Width="5%" ItemStyle-Wrap="false">
                                                <ItemTemplate>
                                                    <asp:Button ID="btnDelete" runat="server" Text="Delete" CommandName="Delete"></asp:Button>
                                                </ItemTemplate>
                                                <HeaderStyle Width="5%" />
                                                <ItemStyle Wrap="False" />
                                            </asp:TemplateField>
                                        </Columns>
                                        <HeaderStyle CssClass="dgHeader" />
                                        <RowStyle CssClass="dgItem" />
                                        <AlternatingRowStyle CssClass="dgAltItem" />
                                        <FooterStyle CssClass="dgFooter" BackColor="#AAAAAA" Font-Bold="True" />
                                    </asp:GridView>
                                    <br style="clear: both;" />
                                    <asp:Panel ID="Panel1" runat="server">
                                        <table style="margin: 3px auto; width: 100%;">
                                            <tr>
                                                <th>
                                                    Description (Please provide itemized costs and descriptions)
                                                </th>
                                                <th>
                                                    Cost (Exclusive of HST)
                                                </th>
                                                <th>
                                                </th>
                                            </tr>
                                            <tr>
                                                <td style="width: 70%">
                                                    <asp:Textbox ID="txtDescription11" runat="server" MaxLength="50" CssClass="textBox" Style="width: 90%;"></asp:Textbox>
                                                </td>
                                                <td style="width: 20%">
                                                    <asp:Textbox ID="txtCost11" runat="server" MaxLength="10" CssClass="textBox" Style="width: 90%;"></asp:Textbox>
                                                </td>
                                                <td style="width: 5%">
                                                    <asp:Button ID="btnProjectCostInsert11" runat="server" Text="Insert" AutoPostBack="true"></asp:Button>
                                                </td>
                                            </tr>
                                        </table>
                                    </asp:Panel>
                                </div>
                                <label class="label_18 grey">blah</label><br /><br />
                                <label class="label_18 grey">blah</label>&nbsp;&nbsp;<asp:label runat="server" id="TotalProjectCost_11" class="label_18 grey" /><br /><br />
                                <label class="label_18 grey">blah:</label>&nbsp;&nbsp;<asp:textbox runat="server" id="Contribution_11" class="label_18 grey" width="10%" /><br /><br />
                                <label class="label_18 grey">blah:</label>&nbsp;&nbsp;<asp:label runat="server" id="FundingRequested_11" class="label_18 grey" /><br /><br />
                                <script type="text/javascript">
                                    // Change contribution
                                    $("#<%=Contribution_11.ClientId %>").focusout(function () {
                                        var costs = $("#<%= TotalProjectCost_11.ClientId %>").html();
                                        var contribution = $("#<%= Contribution_11.ClientId %>").val();
                                        var funding = costs - contribution;
                                        $("#<%= FundingRequested_11.ClientId %>").html(funding.toFixed(2));
                                    });
                                </script>
                            </ContentTemplate>
                        </asp:UpdatePanel>
That code in the JavaScript function fires perfectly when the user focuses out of the Contribution_11 control (however when I check the text value of FundingRequested_11 it comes out as blank in the VB.NET code, despite it being there - I can see the label change on the screen!), BUT...

If I click the btnProjectCostInsert11 button the code behind handles updating the panel and I call Update() in the VB.NET code. Unfortunately after this happens the above jquery code does not fire at all!


What on earth is going on?