0

コードに問題があります。親の追加ボタンが機能していて、問題なく追加されています。ただし、子では、削除ボタンと同じように、追加ボタンは機能しません。ブラウザの削除ボタンは親でのみ機能し、削除ボタンをクリックすると、以前に追加したすべてのフィールドが削除され、サイトが更新されます。私は preventDefault を追加しましたが。ファイルで preventDefault の乗算回数を使用することは許可されていますか?

これが私のコードです: https://jsfiddle.net/q3Lz997m/

コード js ファイル:

const clickBtn = document.querySelector('#addingPerson');
const field = document.querySelector('#inputPerson');
let i = 0;

const deleteField = document.querySelector('.deletePerson');

clickBtn.addEventListener('click', (event) => {
  event.preventDefault();
  const cloneField = field.cloneNode(true);
  cloneField.id = i++;
  field.parentNode.appendChild(cloneField);
});

deleteField.addEventListener('click', (e) => {
  e.preventDefault();
  field.parentNode.removeChild(field);
});

よろしくお願いします！

4

1 に答える 1

0

問題は、cloneMethodがイベント リスナーを複製しないことです。

ノードのクローンを作成すると、固有の (インライン) リスナーを含む、すべての属性とその値がコピーされます。addEventListener() を使用して追加されたイベント リスナーや、要素のプロパティに割り当てられたイベント リスナーはコピーされません。

次のようなことができます。

https://jsfiddle.net/q3Lz997m/2/

const clickBtn = document.querySelector('#addingPerson');
const field = document.querySelector('#inputPerson');
let i = 0;

const deleteField = document.querySelector('.deletePerson');

function deleteDiv(e) {
  e.preventDefault();
  d = e.target.parentNode.parentNode.parentNode.parentNode;
  d.parentNode.removeChild(d);
}

function cloneDiv(event) {
  event.preventDefault();
  const cloneField = field.cloneNode(true);
  cloneField.id = i++;
  e = cloneField.querySelector('#addingPerson');
  e.addEventListener('click', cloneDiv);
  e = cloneField.querySelector('.deletePerson');
  e.addEventListener('click', deleteDiv);
  field.parentNode.appendChild(cloneField);  
}

clickBtn.addEventListener('click', cloneDiv);
deleteField.addEventListener('click', deleteDiv);

そして少し短いバージョンhttps://jsfiddle.net/q3Lz997m/3/ :

function addEventListeners(e) {
  e.querySelector('#addingPerson').addEventListener('click', cloneDiv);
  e.querySelector('.deletePerson').addEventListener('click', deleteDiv);
}

function deleteDiv(e) {
  e.preventDefault();
  d = e.target.parentNode.parentNode.parentNode.parentNode;
  d.parentNode.removeChild(d);
}

function cloneDiv(e) {
  e.preventDefault();
  p = e.target.parentNode.parentNode.parentNode.parentNode;
  cloneField = p.cloneNode(true); 
  addEventListeners(cloneField);
  p.parentNode.appendChild(cloneField);  
}

addEventListeners(document.querySelector('#inputPerson'));

また、ボタンがフォーム内にない限り、 preventDefault() は必要ないと思います。

于 2016-12-02T11:02:53.910 に答える