jQuery中动态生成元素事件处理的优雅之道：事件委托详解

<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>
      </tr>
    </thead>
    <tbody id="table_achievements_tbody">
      <tr>
        <th>1</th>
        <th>
          <select class="form-control">
            <option>Field Name</option>
            <option>Div Awada</option>
            <option>Div Vlad</option>
          </select>
        </th>
        <th>
          <select class="form-control">
            <option>Equals</option>
            <option>Greater than</option>
            <option>Less than</option>
          </select>
        </th>
        <th><input type="text" id="text2" class="form-control" placeholder="Enter Value"></th>
        <th style="width: 120px;">
          <select class="form-control sell" name="argSelect">
            <option value="Arg">Argument</option>
            <option value="AND">AND</option>
            <option value="OR">OR</option>
            <option value="ONLY">ONLY</option>
          </select>
        </th>
        <th style="width:92.56px;"></th>
      </tr>
    </tbody>
  </table>
</div>

$(function() {
  // 使用事件委托处理 .sell 类下拉菜单的 change 事件
  // 将事件绑定到 document，因为它始终存在于DOM中
  $(document).on('change', '.sell', function() {
    var id = $(this).closest("table.table-review").attr('id'); // 获取当前表格的ID
    var val = $(this).val(); // 获取下拉菜单的当前值

    // 如果选择的值是 "AND" 或 "OR"，则添加新行
    if (val === "AND" || val === "OR") {
      console.log("Adding new row for table ID:", id);
      var newRow = $("<tr />"); // 创建一个新的<tr>元素
      newRow.html(GetDynamicTextBox(id)); // 使用 GetDynamicTextBox 函数生成行内容
      $("#" + id + "_tbody").append(newRow); // 将新行添加到对应的 tbody
    }
  });

  // 使用事件委托处理 #comments_remove 按钮的点击事件
  $(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();
  });

  // 动态生成表格行内容的函数
  function GetDynamicTextBox(table_id) {
    // 获取当前表格的行数，用于编号
    var rowsLength = document.getElementById(table_id).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length + 1;

    // 返回新行的HTML字符串
    return '<td>' + rowsLength + '</td>' +
      '<td><select name="DynamicTextBox" class="select form-control"><option>Field Name</option><option>Div Awada</option><option>Div Vlad</option></select></td>' +
      '<td><select name="DynamicTextBox" class="select form-control"><option>Field Name</option><option>Equals</option><option>Greater than</option></select></td>' +
      '<td><input type="text" name="DynamicTextBox" class="form-control" value="" placeholder="Enter Value"></td>' +
      // 注意：这里生成的下拉菜单也带有 .sell 类，以便被事件委托捕获
      '<td><select class="form-control sell" name="argSelect"><option value="Arg">Argument</option><option value="AND">AND</option><option value="OR">OR</option><option value="ONLY">ONLY</option></select></td>' +
      '<td><button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button></td>';
  }
});