title: JQuery closest elements, from TextBox in a GridView
body: <p>I've this javascript function:</p>
  
  <pre><code>function modifica(txtValoreID, txtRicalcolatoID, lblDeltaID) {
    // Ricalcolo il valore aggiornato
    var Valore = parseFloat($("#" + txtValoreID).val()).toFixed(2);
    var Ricalcolato = parseFloat($("#" + txtRicalcolatoID).val()).toFixed(2);
    $("#" + lblDeltaID).html(parseFloat(Valore - Ricalcolato).toFixed(2).replace('.', ','));
  }
  </code></pre>
  
  <p>That refers to textbox and label in a gridview:</p>
  
  <pre><code>&lt;asp:TemplateField&gt; 
      &lt;ItemTemplate&gt;
          &lt;asp:TextBox ID="txtValore" Width="90%" Text='&lt;%# string.Format("{0:N}", Eval("Valore"))%&gt;' runat="server"  /&gt;
      &lt;/ItemTemplate&gt;
  &lt;/asp:TemplateField&gt;
  &lt;asp:TemplateField&gt; 
      &lt;ItemTemplate&gt;
          &lt;asp:TextBox ID="txtRicalcolato" Text='&lt;%# string.Format("{0:N}", Eval("Ricalcolato")) %&gt;' runat="server" /&gt;
      &lt;/ItemTemplate&gt;
  &lt;/asp:TemplateField&gt;
  
  (...)
  
  &lt;asp:TemplateField HeaderText="Delta"&gt; 
      &lt;ItemTemplate&gt;
          &lt;asp:Label ID="lblDelta" Text='&lt;%# string.Format("{0:N}", Eval("Delta"))%&gt;' runat="server" /&gt;
      &lt;/ItemTemplate&gt;
  &lt;/asp:TemplateField&gt;
  </code></pre>
  
  <p>And I'm assigning it in the DataBound:</p>
  
  <pre><code>txtValore.Attributes.Add("onchange", "modifica('" + txtValore.ClientID + "', '" + txtRicalcolato.ClientID + "','" + lblDelta.ClientID + "')");
  txtRicalcolato.Attributes.Add("onchange", "modifica('" + txtDaLiquidare.ClientID + "', '" + txtRicalcolato.ClientID + "','" + lblDelta.ClientID + "')");
  </code></pre>
  
  <p>and it's working perfectly. The problem is that when the gridview have a lot of records, databound is affecting the performance, so my first question is, am I improving this performance moving the assignment from databound server code to aspx page? And if yes, how can I do that? Because I'm trying like this:</p>
  
  <pre><code>asp:TextBox ID="txtValore" onchange="test(this.id)" Text='&lt;%# string.Format("{0:N}", Eval("PremioLiquidare"))%&gt;' runat="server"  /&gt;
  </code></pre>
  
  <p>and this:</p>
  
  <pre><code>function test(txtID) {
      alert('TEST ' + $(this));
      alert('TEST ' + $(this).val());
      alert('TEST ' + $("#" + txtID).val());
      alert('TEST ' + $("#" + txtID).find("[id*='txtRicalcolato']").val());
      alert('TEST ' + $("#" + txtID).closest("[id*='txtRicalcolato']").val());
      alert('TEST ' + $(this).find("[id*='txtRicalcolato']").val());
      alert('TEST ' + $(this).closest("[id*='txtRicalcolato']").val());    
  }
  </code></pre>
  
  <p>But the first is printing TEST Object object, the second blank and the third the correct value, but the others are undefined.. What I'm doing wrong?</p>
  
  <p>The rendered HTML is:</p>
  
  <pre><code>&lt;table class="mGrid" id="ctl00_MainContent_grid"&gt;
      &lt;tbody&gt;
          (...)
          &lt;tr&gt;
              (...)
              &lt;td&gt;
                  &lt;input name="ctl00$MainContent$grid$ctl03$txtValore" value="1.693,44" id="ctl00_MainContent_grid_ctl03_txtValore" onchange="test(this.id)" type="text"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input name="ctl00$MainContent$grid$ctl03$txtRicalcolato" value="169,34" id="ctl00_MainContent_grid_ctl03_txtRicalcolato" onchange="test(this.id)" type="text"&gt;
              &lt;/td&gt;
              (...)
              &lt;td&gt;
                  &lt;span id="ctl00_MainContent_grid_ctl03_lblDelta"&gt;-1.524,10&lt;/span&gt;
              &lt;/td&gt;
              (...)
          &lt;/tr&gt;
          (...)
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>