动态生成表中的另一行后，JQuery函数不起作用[重复]

Question

我有一个输入表单，当单击添加按钮时，它会提交当前的数据行，然后添加新的一行输入字段以输入更多数据。当我单击添加按钮时，它会将第一个输入数据发布到数据库中并创建一个新行。但是，当我尝试提交第二行时，没有任何反应。数据没有提交，也没有添加另一行。

这是我的 jquery 点击函数

$('#addRow').click(function(e) {
        const cloneRow = $('#tableData tbody tr').first();
        e.preventDefault();
        let data = {
         project_id: $(".project_id").last().val(),
         imp_or_ann: $(".imp_or_ann").last().val(),
         category: $(".category").last().val(),
         cost: $(".cost").last().val(),
         hours: $(".hours").last().val()
    }
        $.ajax({
            url: '/costs_hours',
            type: 'POST',
            data: data
        }).then(
            cloneRow.clone().appendTo('#tableData tbody').find(".cost, .hours").val(''),
            $("#next").removeAttr('disabled'),
            $("#link").attr('href', '/fundings')
        )

    })

这是我的输入表单

 <table id="tableData" class="table text-light text-center mt-3">
                    <thead>
                        <tr>
                            <th scope="col">Project ID</th>
                            <th scope="col">Implementation or Annual</th>
                            <th scope="col">Category</th>
                            <th scope="col">Costs</th>
                            <th scope="col">Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="input-group mb-3">
                                    <input name="project_id" type="text" class="form-control project_id">
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <div class="input-group mb-3">
                                        <select name="imp_or_ann" class="form-select imp_or_ann"
                                            id="inputGroupSelect01">
                                            <option disabled selected>Choose...</option>
                                            <option>Implementation</option>
                                            <option>Annual</option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <div class="input-group mb-3">
                                        <select name="category" class="form-select category" id="inputGroupSelect01">
                                            <option disabled selected>Choose...</option>
                                            <option>EMO</option>
                                            <option>Analysts</option>
                                            <option>Maintenance</option>
                                            <option>ETS</option>
                                            <option>BOT</option>
                                            <option>OtherUT</option>
                                            <option>Materials</option>
                                            <option>Non-UT Contract</option>
                                            <option>Contingency</option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <input name="cost" type="text" class="cost form-control">
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <input name="hours" type="text" class="hours form-control">
                                </div>
                            </td>
                            <td>
                                <button id='addRow' type="button" style="background-color: #bf5700;"
                                    class="btn btn-warning text-light"><i
                                        class="fas fa-plus-circle"></i>&nbsp;Add</button>
                            </td>
                        </tr>
                    </tbody>
                </table>

我希望按钮保留在 中，以便用户知道他们必须单击添加按钮才能添加该数据。但这目前仅适用于第一个数据输入。添加第二行时，按钮不起作用，我无法提交数据并且未创建另一行。非常感谢任何建议！

Answer 1

$('#addRow') 在 JS 代码执行时被评估一次。

当您克隆并添加新行时，您实际上是使用id="addRow" 创建了一个新的（和不同的！）元素。那个元素没有监听点击事件的处理程序。

相反，您需要使用 jquery $.on() 将侦听器置于不变的内容上，例如 #tableData：

   $('#tableData').on('click', '.addRow', function(e){
      ...
   });

这样，元素listening 是#tableData，它会获得点击，然后检查点击是否源自与.addRow 匹配的内容。您的实际功能无需更改。

但是，您需要将添加按钮从 id="addRow" 更改为 class="addRow"（或使用名称属性或其他任何东西），这样您就不会在 DOM 中拥有多个具有相同 ID 的元素。

Answer 2

好吧，您为多个对象设置了相同的 ID，这是有问题的，但您真正需要的是在静态父对象上设置侦听器（我使用了 tableData）。我将您的按钮 ID 更改为一个类，因此它可以应用于所有添加按钮。

您的侦听器已设置为扫描页面以查找 button#addRow 并附加侦听器。然后创建按钮的新实例，但侦听器设置已经触发并且不知道新创建的实例。相反，将侦听器设置在静态父级上。事件是on，参数click 检测点击，button.addRow 指定监听器关注的元素。

$('#tableData').on('click', 'button.addRow', function(e) {
  const cloneRow = $('#tableData tbody tr').first();
  e.preventDefault();
  let data = {
    project_id: $(".project_id").last().val(),
    imp_or_ann: $(".imp_or_ann").last().val(),
    category: $(".category").last().val(),
    cost: $(".cost").last().val(),
    hours: $(".hours").last().val()
  }
  $.ajax({
    url: '/costs_hours',
    type: 'POST',
    data: data
  }).then(
    cloneRow.clone().appendTo('#tableData tbody').find(".cost, .hours").val(''),
    $("#next").removeAttr('disabled'),
    $("#link").attr('href', '/fundings')
  )

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableData" class="table text-light text-center mt-3">
  <thead>
    <tr>
      <th scope="col">Project ID</th>
      <th scope="col">Implementation or Annual</th>
      <th scope="col">Category</th>
      <th scope="col">Costs</th>
      <th scope="col">Hours</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="input-group mb-3">
          <input name="project_id" type="text" class="form-control project_id">
        </div>
      </td>
      <td>
        <div class="input-group mb-3">
          <div class="input-group mb-3">
            <select name="imp_or_ann" class="form-select imp_or_ann" id="inputGroupSelect01">
              <option disabled selected>Choose...</option>
              <option>Implementation</option>
              <option>Annual</option>
            </select>
          </div>
        </div>
      </td>
      <td>
        <div class="input-group mb-3">
          <div class="input-group mb-3">
            <select name="category" class="form-select category" id="inputGroupSelect01">
              <option disabled selected>Choose...</option>
              <option>EMO</option>
              <option>Analysts</option>
              <option>Maintenance</option>
              <option>ETS</option>
              <option>BOT</option>
              <option>OtherUT</option>
              <option>Materials</option>
              <option>Non-UT Contract</option>
              <option>Contingency</option>
            </select>
          </div>
        </div>
      </td>
      <td>
        <div class="input-group mb-3">
          <input name="cost" type="text" class="cost form-control">
        </div>
      </td>
      <td>
        <div class="input-group mb-3">
          <input name="hours" type="text" class="hours form-control">
        </div>
      </td>
      <td>
        <button type="button" style="background-color: #bf5700;" class="addRow btn btn-warning text-light"><i
                                        class="fas fa-plus-circle"></i>&nbsp;Add</button>
      </td>
    </tr>
  </tbody>
</table>