jQuery事件委托与动态元素绑定技巧

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《jQuery事件委托详解与动态元素绑定实战》，聊聊，我们一起来看看吧！

本文旨在解决jQuery中对动态创建元素进行事件绑定失效的常见问题。通过深入探讨事件委托机制，我们将理解为何直接绑定对新元素无效，并提供使用$(document).on()方法实现事件委托的解决方案。文章将包含详细的代码示例和原理分析，帮助读者掌握如何在动态内容中高效、稳定地管理事件，避免代码重复，提升应用性能和可维护性。

动态元素事件绑定失效的挑战

在Web开发中，我们经常需要根据用户操作或数据加载动态地向DOM中添加新的HTML元素。一个常见的场景是在表格中动态添加行，每行包含可交互的元素，例如下拉选择框或按钮。然而，当尝试为这些动态生成的元素绑定事件时，开发者常常会遇到事件监听器不生效的问题。

例如，如果初始HTML中存在一个类名为sell的下拉框，我们可以使用$('.sell').on('change', function() { ... });为其绑定change事件。但当通过JavaScript动态生成新的表格行，并在新行中包含同样类名为sell的下拉框时，这些新下拉框的change事件通常不会触发。这是因为直接事件绑定（如$('.sell').on(...)）只对DOM加载时已存在的元素有效。当新元素被添加到DOM后，它们并未被包含在最初的事件绑定范围内。

原始代码示例中，开发者尝试为初始的.sell下拉框绑定事件，并在其值选择“AND”或“OR”时动态生成新行。虽然首行的事件绑定正常工作，但新生成的行中的.sell下拉框的change事件却未能触发，这正是动态元素事件绑定失效的典型表现。

解决方案：jQuery事件委托

解决动态元素事件绑定问题的核心方法是使用事件委托（Event Delegation）。事件委托利用了事件冒泡（Event Bubbling）的特性。当一个事件在DOM元素上触发时，它会从该元素开始，逐级向上冒泡到其父元素，直到文档根节点（document）。

通过事件委托，我们将事件监听器绑定到一个静态的、已存在的父元素上（例如document，或表格容器table_achievements），而不是直接绑定到动态生成的元素本身。当事件冒泡到这个静态父元素时，jQuery会检查事件的源（event.target）是否匹配我们指定的选择器。如果匹配，则执行相应的回调函数。

jQuery提供了$(selector).on(event, childSelector, handler)方法来支持事件委托。

• selector：这是事件监听器绑定的静态父元素。它可以是document，也可以是离动态元素最近的、且在页面加载时就已存在的父元素。
• event：要监听的事件类型，例如'change'、'click'。
• childSelector：这是一个选择器字符串，用于过滤事件。只有当事件的源元素（或其祖先）匹配这个childSelector时，handler才会被执行。
• handler：事件触发时执行的回调函数。

代码示例与解析

以下是使用事件委托修正后的jQuery代码和对应的HTML结构：

$(function() {
  // 使用事件委托处理 .sell 元素的 change 事件
  // 事件监听器绑定到 document，但只有当事件源是 .sell 元素时才触发
  $(document).on('change', '.sell', function() {
    var id = $(this).closest("table.table-review").attr('id'); // 获取当前表格的ID
    var val = $(this).val(); // 获取当前下拉框选中的值
    if (val == "AND" || val == "OR") {
      console.log(id);
      var div = $("<tr />"); // 创建一个新的表格行元素
      div.html(GetDynamicTextBox(id)); // 填充新行的HTML内容
      $("#" + id + "_tbody").append(div); // 将新行添加到表格的 tbody 中
    }
  });

  // 使用事件委托处理 #comments_remove 按钮的 click 事件
  $(document).on("click", "#comments_remove", function() {
    // 移除当前行，并恢复前一行的删除按钮（如果存在）
    $(this).closest("tr").prev().find('td:last-child').html('<button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button>');
    $(this).closest("tr").remove();
  });

  // 辅助函数：生成新表格行的HTML内容
  function GetDynamicTextBox(table_id) {
    var rowsLength = document.getElementById(table_id).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length + 1;
    // 注意：动态生成的元素中，如果id属性是唯一的，应该确保其唯一性。
    // 在此示例中，id="mySelect"在每次生成时都是重复的，但由于事件委托通过类名`.sell`绑定，所以不会影响事件触发。
    // 实际项目中，建议动态生成唯一ID或完全依赖类名。
    return '<td>' + rowsLength + '</td>' +
      '<td>&lt;select name = &quot;DynamicTextBox&quot; class=&quot;select form-control &quot; value = &quot;&quot;&gt;<option>Field Name</option><option>Div Awada</option><option>Div Vlad</option>&lt;/select&gt;</td>' +
      '<td>&lt;select name = &quot;DynamicTextBox&quot; class=&quot;select form-control &quot; value = &quot;&quot;&gt;<option>Field Name</option><option>Equals</option><option>Greater than</option>&lt;/select&gt;</td>' +
      '<td>&lt;input type=&quot;text&quot; name = &quot;DynamicTextBox&quot; class=&quot;form-control&quot; value = &quot;&quot; placeholder=&quot;Enter Value&quot; &gt;</td>' +
      '<td>&lt;select class=&quot;form-control sell&quot; name=&quot;argSelect&quot; id=&quot;mySelect&quot;&gt;<option value="Arg">Argument</option><option value="AND">AND</option><option value="OR">OR</option><option value="ONLY">ONLY</option>&lt;/select&gt;</td>' +
      '<td><button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button></td>';
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table table-review review-table mb-0" id="table_achievements">
    <thead>
      <tr>
        <th style="width:40px;"></th>
        <th></th>
        <th></th>
        <th></th>
        <!-- <th style="width: 64px;"><button type="button" class="btn btn-primary btn-add-row"><i class="fa fa-plus"></i></button></th> -->
      </tr>
    </thead>
    <tbody id="table_achievements_tbody">
      <tr>
        <th>1</th>
        <th>
          &lt;select class=&quot;form-control&quot;&gt;
            <option>Field Name</option>
            <option>Div Awada</option>
            <option>Div Vlad</option>
          &lt;/select&gt;
        </th>
        <th>
          &lt;select class=&quot;form-control&quot;&gt;
            <option>Equals</option>
            <option>Greater than</option>
            <option>Less than</option>
          &lt;/select&gt;
        </th>
        <th>&lt;input type=&quot;text&quot; id=&quot;text2&quot; class=&quot;form-control&quot; placeholder=&quot;Enter Value&quot;&gt;</th>
        <th style="width: 120px;">
          &lt;select class=&quot;form-control sell&quot; name=&quot;argSelect&quot;&gt;
            <option value="Arg">Argument</option>
            <option value="AND">AND</option>
            <option value="OR">OR</option>
            <option value="ONLY">ONLY</option>
          &lt;/select&gt;
        </th>
        <th style="width:92.56px;"></th>
      </tr>
    </tbody>
  </table>
</div>

关键改动点：

1. 移除直接绑定： 删除了原始代码中$('.sell').on('change', function () { ... });这行，因为它只对页面加载时存在的元素有效。
2. 引入事件委托： 将change事件的绑定方式改为$(document).on('change', '.sell', function() { ... });。这意味着事件监听器被绑定到document对象上。当任何.sell元素发生change事件并冒泡到document时，jQuery会检查事件源是否是.sell，如果是，则执行回调函数。
3. 移除冗余函数： genfun()函数被删除，因为它与$('.sell').on('change', ...)的功能重复且实现方式不当（尝试通过onchange="genfun()"绑定，这同样无法解决动态元素的事件问题，并且在GetDynamicTextBox中为每个新元素重复添加id="mySelect"会导致ID冲突）。事件委托的方案使得所有相关逻辑都集中在一个地方。

选择委托父元素的考量

虽然将事件委托到document对象是最简单和最通用的方法，但并非总是最佳实践。

• document对象： 优点是它总是存在，并且可以捕获任何冒泡事件。缺点是如果页面上有大量事件监听器委托给document，可能会对性能产生轻微影响，因为每次事件冒泡到document时，jQuery都需要遍历并检查所有委托的childSelector。
• 最近的静态父元素： 最佳实践是将事件委托到离动态元素最近的、且在页面加载时就已存在的父元素。例如，在这个表格动态添加行的场景中，table_achievements_tbody或者table_achievements都是更好的委托父元素选择。

  // 示例：委托给 tbody 元素
  $('#table_achievements_tbody').on('change', '.sell', function() {
      // ... 相同的逻辑 ...
  });

  这样做的好处是事件冒泡的路径更短，jQuery需要检查的元素范围更小，从而提高性能。

注意事项

1. ID的唯一性： 在GetDynamicTextBox函数中，动态生成的<select>元素被赋予了id="mySelect"。HTML规范要求ID在整个文档中是唯一的。虽然事件委托通过类名.sell工作，不受重复ID的影响，但如果后续需要通过ID来操作这些动态生成的元素，或者有其他脚本依赖于ID的唯一性，这将会导致问题。建议在动态生成元素时，为ID添加一个唯一的后缀（例如，id="mySelect_" + rowsLength），或者仅依赖类名进行操作。
2. this上下文： 在事件委托的回调函数中，this关键字始终指向触发事件的实际元素（即childSelector匹配的元素），而不是委托的父元素。这使得在回调函数中可以直接访问和操作触发事件的元素，如$(this).val()。
3. 事件类型： 并非所有事件都支持冒泡。例如，focus和blur事件默认不冒泡（但可以通过事件捕获阶段处理）。对于大多数常见的事件（click, change, submit, keyup, keydown等），事件委托是有效的。

总结

jQuery事件委托是处理动态生成元素事件绑定问题的强大而优雅的解决方案。它通过将事件监听器绑定到静态父元素，并利用事件冒泡机制来捕获和过滤事件，从而确保即使是后添加到DOM中的元素也能正确响应用户交互。采用事件委托不仅解决了动态元素事件失效的问题，还有助于减少事件监听器的数量，提高页面性能和代码的可维护性。在实际开发中，应优先考虑将事件委托给离动态元素最近的静态父元素，以达到最佳的性能和效率。

本篇关于《jQuery事件委托与动态元素绑定技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！