Can't get jquery variables to be recognized as global inside function
<p>This jquery works:</p>

<p><a href="http://jsfiddle.net/7DXSL/1/" rel="nofollow">http://jsfiddle.net/7DXSL/1/</a></p>

<p>BUT, in my C# page, this jquery doesn't work:</p>

<pre><code>$(document).ready(function() {
    var $txtFirstNumber = $('#&lt;%= fvLineItemDetail.FindControl("txtFirstNumber").FindControl("txtData").ClientID %&gt;');
    var $txtSecondNumber = $('#&lt;%= fvLineItemDetail.FindControl("txtSecondNumber").FindControl("txtData").ClientID %&gt;');
    var $txtTotal = $('#&lt;%= fvLineItemDetail.FindControl("txtTotal").FindControl("literalStyle").ClientID %&gt;');

    $txtFirstNumber.live("change", calculate);
    $txtSecondNumber.live("change", calculate);

    function calculate() {
        $txtTotal.text(parseInt($txtFirstNumber.val()) + parseInt($txtSecondNumber.val()));
    }
});
</code></pre>

<p>The calculate function is being called when the value in $txtFirstNumber or $txtSecondNumber changes and loses focus, but the three variables inside the function are undefined and not being recognized as global. Any ideas?</p>

<p>Edit: Here is some more code as requested...</p>

<pre><code>&lt;asp:FormView ID="fvLineItemDetail" runat="server" EnableViewState="true"&gt;
    &lt;ItemTemplate&gt;
        &lt;div class="col"&gt;
            &lt;control:TextBoxPDSL ID="txtFirstNumber" runat="server" cssClass="input" Text="5" /&gt;
        &lt;/div&gt;
        &lt;div class="col"&gt;
            &lt;control:TextBoxPDSL ID="txtSecondNumber" runat="server" cssClass="input" Text="3" /&gt;
        &lt;/div&gt;
        &lt;div class="col"&gt;
            &lt;control:TextBoxPDSL ID="txtTotal" IsReadOnlyLocked="true" runat="server" cssClass="input" /&gt;
        &lt;/div&gt;
    &lt;/ItemTemplate&gt;
&lt;/asp:FormView&gt;
</code></pre>
