嵌套在动态添加的内部时，JavaScript事件不会触发<div>

Question

Using Play 2.3.x, I am trying to implement a form based on one of Play!'s 2.2.x sample forms that dynamically adds/removes fields using an add/remove button, as described in this answer .

I've successfully implemented a delete button that will delete it's parent div , using a className, and an add button that adds a new div to the form based on a hidden template, using an ID. However, in each div element added to the page, the JavaScript event for the nested delete button doesn't seem to fire or get recognized by the page. I've reviewed a few other questions ( wrap with anonymous function , re-add control at page load , etc) and discussed with other developers, but still can't resolve the issue. I've been working with JS for about 2 weeks now, and it's likely that I don't know the right documentation to review to find a resolution. Any advice regarding resolution, an explanation as to the cause of the issue, and even tips for better coding practice would be appreciated.

I've stripped out the Play! references in an effort to minimize down to the problem and provided an executable version of the same:

<div class="well weekly">
  <div class="alignRight">
      <a class="btn btn-default remove"><i class="glyphicon glyphicon-trash"></i></a>
  </div>
  <table class="formtable"><tbody>
      <tr>
          <td colspan="2">title</td>
      </tr>
      <tr>
          <td>category</td>
          <td>content</td>
      </tr>
  </table>
</div>

<div id="template" class="weeklyTemplate">
  <div class="alignRight">
      <a class="btn btn-default remove"><i class="glyphicon glyphicon-trash"></i></a>
  </div>
  <table class="formtable"><tbody>
      <tr>
          <td colspan="2">title</td>
      </tr>
      <tr>
          <td>category</td>
          <td>content</td>
      </tr>
  </table>
</div>

<a class="btn btn-primary add">Add</a>

And this is the JavaScript for the add and delete buttons:

<script>
  $('.remove').on('click', function() {
      $(this).parents('.weekly').remove();
  });

  $('.add').on('click', function() {
      $("#template").before('<div class="well weekly">' + $('#template').html() + '</div>');
  });
</script>

Answer 1

Attach them to the parent:

  $('body').on('click', '.remove', function() {
      $(this).parents('.weekly').remove();
  });

  $('body').on('click', '.add', function() {
      $("#template").before('<div class="well weekly">' + $('#template').html() + '</div>');
  });

This way the click event bubbles up to the parent and we catch it there, even from dynamically created objects.

I'm using $('body') selector simply because I can't see from your code example which is the correct parent. You might want to use $('#template') or $('.formtable') or some other container.

http://api.jquery.com/on/