javascript - 如何从添加到html页面的动态元素中获取数据？

Question

在下面我写了我的 html 页面的一部分。

<form method="post" enctype="multipart/form-data">
  <div>
    <label>Brand Name:</label>
    <input type="text" asp-for="@Model.Name">
  </div>
  <div id="divCategory">

  </div>
  <button type="button" id="btnAddCategory">Add Category</button>
  <button>Create new Brand</button>
</form>

我有两个 js 和 jquery 函数，它们将选择添加到 divCategory。通过此选择，我可以添加一些类别。

function countMyCategories() {
  if (typeof countMyCategories.counter == 'undefined') {
    countMyCategories.counter = -1;
  }
  return ++countMyCategories.counter;
}  

$(document).ready(function () {
  $('#btnAddCategory').on('click', function () {
    var catId = countMyCategories();
    $('#divCategory').append(
      '<select id="selectCategory' + catId + '" asp 
      for="@@Model.CatBrands[' + catId + '].CatId" class="mt-3 form-control 
      form-control-sm">' +
      '<option>---Select---</option>' +
      '</select>'
     );

     $.ajax('/API/GetCats')
       .done(function (categories) {
         for (var i = 0; i < categories.length; i++) {
           $('#selectCategory' + catId).append(
             '<option value="' + categories[i].id + '">' + 
              categories[i].name + '</option>'
             )
          }
        });
     });
 });

当我单击“添加类别”按钮时，一个选择标签通过 id="divCategory"添加到 div，但问题是当我单击“创建新品牌”按钮时，我没有从这些选择中获取数据服务器，实际上 CatBrands 为空，但我得到了名字。我得到类似的东西:

{name = "LG", catBrands = null}

Answer 1

CatBrands 为空，因为您无法以这种方式从服务器动态添加数据。当页面呈现时，您需要在 html 中由 asp 呈现您想要的所有内容。

<form method="post" enctype="multipart/form-data">
  <div>
    <label>Brand Name:</label>
    <input type="text" asp-for="@Model.Name">
  </div>
  <div id="divCategory">
    <select id="selectCategory asp-code-goes-here>
      <option>---Select---</option>
    </select>
  </div>
  <button type="button" id="btnAddCategory">Add Category</button>
  <button>Create new Brand</button>
</form>