jquery - 删除附加项目

Question

我想添加和删除新的输入字段。默认情况下，我在 HTML 中准备了两个字段，当我想通过脚本删除它们时，它可以工作。但是当我添加新的输入时，它不起作用。

<form action="test.php" method="post" name="days">
<div class="input-row">
  <label>
    1. item: <input name="item1" />
  </label>
  <br />
</div>
<div class="input-row">
  <label>
    2. item: <input name="item2" /><span class="delete"> - Delete</span>
  </label>
  <br />
</div>
<div class="input-row">
<label>
  3. item: <input name="item3" /><span class="delete"> - Delete</span>
</label>
<br />
</div>
<p class="add-new-row">+ Add new field</p>
</form>

<script>
jQuery(document).ready(function() {
  $('p.add-new-row').click(function() {
    var n = $('input').length+1;
    $('<div class="input-row"><label>'
        + n
        + '. item: <input name="item'
        + n
        + '"></input><span class="delete"> - Delete</span></label><br /></div>').appendTo('form[name="days"]').insertBefore('p.add-new-row');
    return false;
  });

  $('.delete').on("click", function() {
    $(this).closest('.input-row').remove();
  return false;
  });
});
</script>

Answer 1

你需要做的就是改变这个：

$('.delete').on("click", function() {
    $(this).closest('.input-row').remove();
    return false;
});

对此：

$(document).on("click", ".delete", function() {
    $(this).closest('.input-row').remove();
    return false;
});

JSFiddle：http: //jsfiddle.net/epaT9/

当您开始添加新元素时，DOM 已经加载，因此您必须引用该文档。