-3

新しい入力フィールドを追加および削除したい。デフォルトでは、HTML で 2 つのフィールドが用意されており、スクリプトを使用してそれらを削除したい場合は機能します。しかし、新しい入力を追加しても機能しません。

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

1 に答える 1

2

これを変更するだけです：

$('.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 は既に読み込まれているため、ドキュメントを参照する必要があります。

于 2013-09-04T17:31:11.213 に答える