JQuery 最接近的元素，来自 GridView 中的文本框

JQuery closest elements, from TextBox in a GridView

本文关键字：文本 GridView 最接近 元素 JQuery 来自      更新时间：2023-09-26

我有这个javascript函数：

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('.', ','));
}

这是指网格视图中的文本框和标签：

<asp:TemplateField> 
    <ItemTemplate>
        <asp:TextBox ID="txtValore" Width="90%" Text='<%# string.Format("{0:N}", Eval("Valore"))%>' runat="server"  />
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField> 
    <ItemTemplate>
        <asp:TextBox ID="txtRicalcolato" Text='<%# string.Format("{0:N}", Eval("Ricalcolato")) %>' runat="server" />
    </ItemTemplate>
</asp:TemplateField>
(...)
<asp:TemplateField HeaderText="Delta"> 
    <ItemTemplate>
        <asp:Label ID="lblDelta" Text='<%# string.Format("{0:N}", Eval("Delta"))%>' runat="server" />
    </ItemTemplate>
</asp:TemplateField>

我在数据绑定中分配它：

txtValore.Attributes.Add("onchange", "modifica('" + txtValore.ClientID + "', '" + txtRicalcolato.ClientID + "','" + lblDelta.ClientID + "')");
txtRicalcolato.Attributes.Add("onchange", "modifica('" + txtDaLiquidare.ClientID + "', '" + txtRicalcolato.ClientID + "','" + lblDelta.ClientID + "')");

而且它运行良好。问题是，当网格视图有很多记录时，数据绑定会影响性能，所以我的第一个问题是，我是否提高了这种性能，将分配从数据绑定服务器代码移动到 aspx 页？如果是，我该怎么做？因为我正在尝试这样做：

asp:TextBox ID="txtValore" onchange="test(this.id)" Text='<%# string.Format("{0:N}", Eval("PremioLiquidare"))%>' runat="server"  />

而这个：

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());    
}

但是第一个是打印TEST Object对象，第二个空白，第三个是正确的值，但其他是未定义的。我做错了什么？

呈现的 HTML 是：

<table class="mGrid" id="ctl00_MainContent_grid">
    <tbody>
        (...)
        <tr>
            (...)
            <td>
                <input name="ctl00$MainContent$grid$ctl03$txtValore" value="1.693,44" id="ctl00_MainContent_grid_ctl03_txtValore" onchange="test(this.id)" type="text">
            </td>
            <td>
                <input name="ctl00$MainContent$grid$ctl03$txtRicalcolato" value="169,34" id="ctl00_MainContent_grid_ctl03_txtRicalcolato" onchange="test(this.id)" type="text">
            </td>
            (...)
            <td>
                <span id="ctl00_MainContent_grid_ctl03_lblDelta">-1.524,10</span>
            </td>
            (...)
        </tr>
        (...)
    </tbody>
</table>

您正在尝试从元素向下搜索 find ，并且元素向上搜索 closest 但目标元素位于 DOM 的另一个分支中。

  • find仅从元素向下搜索（其后代）
  • closest只搜索祖先（不是字面上最接近的匹配项）。

您需要使用closest向上搜索，然后向下find：

例如，第 3 和第 4 个应该是：

    alert('TEST ' + $("#" + txtID).closest('someCommonParentElementSelector').find("[id*='txtRicalcolato']").val());

建议：使用单个委托事件处理程序

不要添加基于属性的更改处理程序，而是使用附加到非更改祖先元素（例如周围的table或div）的单个委托事件处理程序。这具有更低的开销，并将所有代码保存在一个地方。

根据新的 HTML 示例，委托事件处理程序将如下所示：

// Shortcut DOM ready handler
$(function(){
    // Listen for change events bubbling up to the grid, 
    // then match elements with ID ending in "txtValore"
    $('.mGrid').on('change', 'input[id$="txtValore"]' function(){
          // this is the *txtValore field that changed
          var $input = $(this);
          // Find the matching input by looking up (to closest row) and then down the tree
          // for an element with ID ending in "txtRicalcolato"
          var $otherInput = $input.closest('tr').find('input[id$="txtRicalcolato"]');
          // now do "something" with the two inputs :)
    });
});

笔记：

  • 然后，您可以从输入中删除任何onChange属性。
  • 这使得设置更简单，并将事件处理程序代码与事件处理程序注册放在一起。
  • 如果没有动态添加的元素，你可以使用 jQuery 处理程序，比如
    • $('.mGrid input[id$="txtValore"]').on('change', function(){或
    • $('.mGrid input[id$="txtValore"]').change(function(){但委派事件更灵活。
  • [id$=""]选择器是一个结尾为选择器，因为您的实际 ID 以生成前缀开头。
  • 委托事件处理程序的工作原理是侦听事件以冒泡到不变的祖先元素（在本例中为 .mGrid 类），然后将 jQuery 选择器应用于导致事件的气泡链中的元素，然后应用函数。这也适用于动态添加的元素，因为选择器在事件时运行，而不是在事件注册时运行。

更新：ID 生成已更改

在注释中，您提到 ID 生成已更改，因此后缀不再位于 id 的末尾（附加了下划线和数字）。 jQuery还有一个属性包含选择器*=，它将示例代码更改为：

// Shortcut DOM ready handler
$(function(){
    // Listen for change events bubbling up to the grid, 
    // then match elements with ID containing "txtValore"
    $('.mGrid').on('change', 'input[id*="txtValore"]' function(){
          // this is the *txtValore field that changed
          var $input = $(this);
          // Find the matching input by looking up (to closest row) and then down the tree
          // for an element with ID containing "txtRicalcolato"
          var $otherInput = $input.closest('tr').find('input[id*="txtRicalcolato"]');
          // now do "something" with the two inputs :)
    });
});
相关文章：