querySelectorAll无法获取动态添加卡片数据问题求助

API 探路者

2026-6-22

动态添加卡片后无法获取所有卡片数据的问题

我想要保存动态添加的卡片数据，每张卡片都有名称相同的term和definition输入框，但使用querySelectorAll只能获取第一张卡片的数据，动态添加的卡片数据拿不到。以下是相关代码：

script.js

var currentCardNumber = 1;

function addCard() {

    currentCardNumber++;
    let newCardHTML = `
                    <div class="header d-flex justify-content-between p-3">
                        <h4 class="card-counter">${currentCardNumber}</h4>
                    </div>
                    <div class="card-body row">
                        <div class="term col">
                            <h3>Term</h3>
                            <input class="form-control w-100" name = "term" >
                        </div>
                        <div class="definition col">
                            <h3>Definition </h3>
                            <input class="form-control w-100" name="definition" >
                        </div>
                    </div>
            </div> `;
    let newCard = document.createElement('div');
    newCard.classList.add('card');
    newCard.classList.add('mt-3');
    newCard.innerHTML = newCardHTML;

    let addNewCard = document.querySelector('.cards');
    let referenceNode = document.getElementById('create-cards');
    addNewCard.insertBefore(newCard, referenceNode);

}
function saveCardDataToServer() {
  let cards = [];
  document.querySelectorAll('.card').forEach((card) => {

    let term = card.querySelector('input[name="term"]').value.trim();
    let definition = card.querySelector('input[name="definition"]').value.trim();
    if (term && definition) {
      cards.push({
        Term: term,
        Definition: definition
      });
    }
  })
  fetch('/Cards/Create/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(cards)
    })
    .then(response => response.json())
    .then((data => {
      if (data.success) {
        console.log("Data successfully saved: ", data);
        window.location.href = "/Cards/Learning";
      } else {
        console.error("Error saving card: ", data.message);
      }
    }))
}

document.addEventListener('DOMContentLoaded', function() {
  let newCard = document.querySelector('.new-card');
  newCard.addEventListener('click', function() {
    addCard();
  });
  document.querySelector('form.cards').addEventListener('submit', function() {
    saveCardDataToServer();
  });
});

View（HTML）

@model CardList

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Quizlet</title>
    <script src="~/js/script.js">
    </script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" asp-append-version="true">
    <link rel="stylesheet" href="~/css/font.css" asp-append-version="true"/>
    <link rel="stylesheet" href="~/css/MainStyles.css" asp-append-version="true"/>
    
</head>

<body>

<main class="main">
  <div class="container">
                <div class="new-module d-flex justify-content-between mt-5">
            <h1>Create new module</h1>
            <a class="btn btn-primary" asp-controller="Cards" asp-action="learning" type="submit">Создать</a>
        </div>

        <div class="card mt-5 p-2 pb-3">
            <h3>Title</h3>
            <input class="form-control w-100" placeholder="Enter a name">
        </div>
        <form asp-controller="Cards" asp-action="Create" method="post" class="cards">
            <div class="card mt-6" id="card">
                <div class="header d-flex justify-content-between p-3">
                    <h4 class="card-counter">1</h4>
                </div>
                <div class="card-body row">
                    <div class="term col">
                        <h3>Term</h3>
                        <input class="form-control w-100" name = "term" >
                    </div>
                    <div class="definition col">
                        <h3>Definition </h3>
                        <input class="form-control w-100" name = "definition"  >
                    </div>
                </div>
            </div>

            <input type="submit" value="Create" id="create-cards" class="btn btn-primary mt-2"/>
        </form>
        <button class="new-card w-100 d-flex justify-content-center align-items-center mt-4 mt-s rounded-2" style="height: 5rem"  type="button">
            <h3>+ Add card</h3>
        </button>
  </div>

</main>
</body>

</html>

我认为问题可能与动态卡片的添加有关。

问题原因及修复方案

核心问题

新卡片的HTML结构错误：addCard函数中生成的newCardHTML末尾多了一个额外的</div>，导致新卡片的DOM结构被破坏，无法被querySelectorAll('.card')正确识别。
表单提交未阻止默认行为：点击提交按钮后页面会直接刷新，导致saveCardDataToServer的逻辑可能未执行完成就中断。

修复步骤

修正新卡片的HTML结构
删除newCardHTML末尾多余的</div>，正确的代码如下：

let newCardHTML = `
    <div class="header d-flex justify-content-between p-3">
        <h4 class="card-counter">${currentCardNumber}</h4>
    </div>
    <div class="card-body row">
        <div class="term col">
            <h3>Term</h3>
            <input class="form-control w-100" name="term">
        </div>
        <div class="definition col">
            <h3>Definition </h3>
            <input class="form-control w-100" name="definition">
        </div>
    </div>`;

阻止表单默认提交行为
在表单的submit事件监听中添加event.preventDefault()，避免页面刷新：

document.querySelector('form.cards').addEventListener('submit', function(event) {
    event.preventDefault();
    saveCardDataToServer();
});

可选优化：限定卡片选择范围
为避免选中页面中其他无关的.card元素（比如标题输入框所在的卡片），可以将卡片选择范围限定在表单内部：
```
document.querySelector('form.cards').querySelectorAll('.card').forEach((card) => {
    // 原有逻辑不变
});
```

修复后的完整script.js

var currentCardNumber = 1;

function addCard() {
    currentCardNumber++;
    let newCardHTML = `
        <div class="header d-flex justify-content-between p-3">
            <h4 class="card-counter">${currentCardNumber}</h4>
        </div>
        <div class="card-body row">
            <div class="term col">
                <h3>Term</h3>
                <input class="form-control w-100" name="term">
            </div>
            <div class="definition col">
                <h3>Definition </h3>
                <input class="form-control w-100" name="definition">
            </div>
        </div>`;
    let newCard = document.createElement('div');
    newCard.classList.add('card');
    newCard.classList.add('mt-3');
    newCard.innerHTML = newCardHTML;

    let addNewCard = document.querySelector('.cards');
    let referenceNode = document.getElementById('create-cards');
    addNewCard.insertBefore(newCard, referenceNode);
}

function saveCardDataToServer() {
    let cards = [];
    document.querySelector('form.cards').querySelectorAll('.card').forEach((card) => {
        let term = card.querySelector('input[name="term"]').value.trim();
        let definition = card.querySelector('input[name="definition"]').value.trim();
        if (term && definition) {
            cards.push({
                Term: term,
                Definition: definition
            });
        }
    });
    fetch('/Cards/Create/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(cards)
    })
    .then(response => response.json())
    .then((data) => {
        if (data.success) {
            console.log("Data successfully saved: ", data);
            window.location.href = "/Cards/Learning";
        } else {
            console.error("Error saving card: ", data.message);
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    let newCard = document.querySelector('.new-card');
    newCard.addEventListener('click', function() {
        addCard();
    });
    document.querySelector('form.cards').addEventListener('submit', function(event) {
        event.preventDefault();
        saveCardDataToServer();
    });
});

内容的提问来源于stack exchange，提问作者Egor

querySelectorAll无法获取动态添加卡片数据问题求助

script.js #

View（HTML） #

问题原因及修复方案 #

核心问题 #

修复步骤 #