Question

使用Play 2.3.x，我正在尝试使用Play！的2.2.x示例表单之一实现一个表单，该表单使用添加/删除按钮动态添加/删除字段，如下所述{ {3}}。

我已成功实施了一个删除按钮，该按钮会删除它的父div，使用className，并添加一个新的div添加到表单的基础上隐藏的模板，使用ID。但是，在添加到页面的每个div元素中，嵌套删除按钮的JavaScript事件似乎无法触发或被页面识别。我已经审核了其他一些问题（answer，wrap with anonymous function等），并与其他开发人员讨论过，但仍然无法解决问题。我已经和JS一起工作了大约两个星期了，而且我可能不知道要查看的正确文档以找到解决方案。任何有关解决方案的建议，关于问题原因的解释，甚至更好的编码实践的提示都将不胜感激。

我已经剥离了Play！引用以尽量减少问题并提供相同的re-add control at page load版本：

<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>

这是添加和删除按钮的JavaScript：

<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

将它们附加到父级：

click

这样$('body')事件就会冒泡到父节点，我们会在那里捕获它，即使是动态创建的对象。

我正在使用$('#template')选择器，因为我无法从您的代码示例中看到哪个是正确的父级。您可能希望使用$('.formtable')或foo或其他容器。

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

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

1 个答案: