JQuery при клике перечисляет элементы только один раз должным образом, затем сохраняет последнее значение все время

Question

У меня странная проблема с созданием интерфейсного слоя для простого java LibraryApp.Я динамически создал (bootstrap) выпадающие кнопки, которые должны перечислять заимствования читателей.Каждая кнопка работает правильно, но только один раз для каждого читателя.Затем он берет последний загруженный список и отображает его после каждого клика.Когда я обновляю страницу, она снова работает нормально, но только один раз.Вот мои функции:

function listBorrowedCopiesInDropdownRequest(){
  const requestUrl = apiRoot + 'getBorrowedCopies';
  $(".readers").on("click", ".return-copy", function(){

    console.log("return clicked");
    var readerId = $(this).closest("tr").find(".readerId").html();

    $.ajax({
      url: requestUrl + "?" + $.param({readerId: readerId}),
      method: 'GET',
      contentType: "application/json",
      success: function(copies){
        console.log(copies);
        var copiesAmount = copies.length;

        listBorrowedCopiesInDropdown(copies);
      }
    });
  });
}

и этот отвечает за создание списка элементов (копий):

function listBorrowedCopiesInDropdown(copies){
  var result = "";
  for(i = 0; i<copies.length; i++){
    result += "<a class=\"dropdown-item borrowed-copy\" href=\"#\">" + 
    copies[i].inventoryNumber + "</a>"
    $(".copies-list").html(result);
  } 
}

О HTML: эта кнопка (.return-copy) создается динамическисо всем содержимым (зависит от того, сколько читателей существует).Таким образом, каждый создается из js:

<table class="table table-stripped readers">
  <tr>
    <td class="readerId">ID</td>
    <td class="readerFirstName">FIRST NAME</td>
    <td class="readerLastName">LAST NAME</td>
    <td class="readerEmail">EMAIL</td>
    <td class="readerBirthDate">BIRTH DATE</td>
    <td class="readerBorrows">BORROWS</td>

    <td>
      <div class="buttons">

        <button type="button" class="btn btn-secondary btn-sm edit-reader" data-toggle="modal" data-target="#exampleModal">Edit</button>

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="edit-reader">Edit reader</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="reader-first-name-update" class="col-form-label">First name</label>
                    <input type="text" class="form-control" id="reader-first-name-update">
                  </div>
                  <div class="form-group">
                    <label for="reader-last-name-update" class="col-form-label">Last name</label>
                    <input type="text" class="form-control" id="reader-last-name-update"></input>
                  </div>
                  <div class="form-group">
                    <label for="birth-date-update" class="col-3 col-form-label">Birth date</label>
                    <input class="form-control" type="date" placeholder="Birth date" id="birth-date-update">
                  </div>
                  <div class="form-group">
                    <label for="reader-email-update" class="col-form-label">Email</label>
                    <input type="email" class="form-control" id="reader-email-update"></input>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary save-changes">Save</button>
              </div>
            </div>
          </div>
        </div>-->

        <!--RETURN COPY OF BOOK-->
        <div class = "dropdown">
          <button class="btn btn-secondary btn-sm dropdown-toggle return-copy" type="button" id="return-copy" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Return copy
          </button>
          <div class="dropdown-menu copies-list" aria-labelledby="return-copy">
            <a class="dropdown-item" href="#">No copies</a>
          </div>
        </div>

        <button class="btn btn-secondary btn-sm delete-reader-button">Delete reader</button>
      </div></td>    
    </tr>
  </table>

Затем после нажатия на кнопку .return-copy выпадающий список также загружается динамически (для каждого читателя свой список заимствованных книг)

Я будуБуду очень признателен за любые идеи, что здесь не так.

Answer 1

когда вы вызываете html функцию jQuery, она меняет все html-содержимое тега.

, поэтому я думаю, вам нужно использовать $(".copies-list").append(result);, чтобы добавить свои элементы в copies-list

, а также измените следующее:

$(".readers").on("click", ".return-copy", function(){

на

$(document).on("click", ".readers .return-copy", function(){

, затем повторите попытку.

подробнеео разнице между двумя приведенными здесь фрагментами кода: Чем отличаются $ (document) .on () и $ (element) .on ()