Как получить данные из динамических элементов, добавленных на 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>'
             )
          }
        });
     });
 });

Когда я нажимаю кнопку «Добавить категорию», один тег выбора добавляется в div с помощью id = "divCategory", но проблема в том, что когда я нажимаю "Создать"Кнопка «Новый бренд», я не получаю данные от этих выборов на сервере, на самом деле CatBrands имеет значение null, но у меня есть имя.Я получаю что-то вроде этого:

{name = "LG", catBrands = null}

Answer 1

Я допустил ужасную ошибку.Я должен изменить свою функцию следующим образом

$(document).ready(function () {
 $('#btnAddCategory').on('click', function () {
 var catId = countMyCategories();
 $('#divCategory').append(
  '<select id="selectCategory' + catId + '" 
  name = "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>'
         )
      }
    });
 });

});

Answer 2

CatBrands имеет значение null, поскольку вы не можете динамически добавлять данные с сервера таким способом.Когда страница отрисовывается, вам нужно все, что вы хотите отрисовать с помощью ASP в HTML.

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