title: JQuery on dynamically generated html tables
body: <p>I have multiple HTML tables generated dynamically. Each row on the tables has an Edit button.
  With the following code, the click event only fires for the buttons on the first table. It doesn't work for the subsequent tables. Please help me to make it work for all the tables.</p>
  
  <p>In my Django template:</p>
  
  <pre><code>{% for parent in parents %}
    &lt;table class="table" id="my-table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        {% for child in parent.children %}
          &lt;tr&gt;
            &lt;td&gt;{{ child.name }}&lt;/td&gt;
            &lt;td&gt;{{ child.age }}&lt;/td&gt;
            &lt;td&gt;
              &lt;button type="button" class="btn-edit" data-url="{% url "app:child-update" child.id %}"&gt;
                &lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt; Edit
              &lt;/button&gt;
            &lt;/td&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  {% endfor %}
  </code></pre>
  
  <p>JavaScript code:</p>
  
  <pre><code>$(function () {
  
    var loadForm = function () {
    // ....
   }
  };
  
  $("table").on("click", ".btn-edit", loadForm);
  </code></pre>