JQuery的动态生成的HTML表格

Question

我有动态生成多个HTML表格。对表的每一行都有一个编辑按钮。用下面的代码，点击事件仅触发了第一个表中的按钮。它不为后续表工作。请帮我，使之成为所有表工作。

在我的Django的模板：

{% for parent in parents %}
  <table class="table" id="my-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for child in parent.children %}
        <tr>
          <td>{{ child.name }}</td>
          <td>{{ child.age }}</td>
          <td>
            <button type="button" class="btn-edit" data-url="{% url "app:child-update" child.id %}">
              <span class="glyphicon glyphicon-pencil"></span> Edit
            </button>
          </td>
    </tbody>
  </table>
{% endfor %}

JavaScript代码：

$(function () {

  var loadForm = function () {
  // ....
 }
};

$("table").on("click", ".btn-edit", loadForm);

Answer 1

Django的模板：

{% for parent in parents %}
  <table class="table" id="my-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for child in parent.child_set.all %}
        <tr>
          <td>{{ child.name }}</td>
          <td>{{ child.age }}</td>
          <td>
            <button type="button" class="btn-edit" data-url="{% url 'app:child-update' child.id %}">
              <span class="glyphicon glyphicon-pencil"></span> Edit
            </button>
          </td>
         </tr>
         {% empty %}
         <tr>
           <td>No Records yet.</td>
         </tr>
         {% endfor %}
    </tbody>
  </table>
{% endfor %}

jQuery的：

$(function () {  
    var loadForm = function () {
      // ...
    };

    $("table").on("click", ".btn-edit", loadForm);

  });