jqueryonclick只正确列出一次项，然后始终保持最后一个值

我在为简单的java LibraryApp构建前端层时遇到了一个奇怪的问题。 我已经动态创建了（引导）下拉按钮，它应该列出读者的借阅。每个按钮都能正常工作，但每个读卡器只能使用一次。然后，它获取上次加载的列表，并在每次单击后显示它。当我刷新页面时，它会再次正常工作，但只有一次。 以下是我的职能：

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);
      }
    });
  });
}

这个人负责创建元素列表（副本）：

函数列表借用副本复制（副本）{
var结果=”；
对于（i=0；i
返回副本
删除读取器

然后单击“返回副本”按钮后，下拉列表也会动态加载（对于每个读者，另一个借阅书籍列表）

---

我将非常感谢任何关于这里的错误的想法。

当您调用jQuery的

html

函数时，它会更改标记的整个html内容

因此，我认为您需要使用

$（“.copies list”）.append（result）；

将元素添加到

副本列表中

并作出以下改变：

$（“.readers”）。在（“单击”，“返回副本”，function（）{

到

$（document）.on（“单击“，”.readers.return copy”，function（）{

然后再试一次

请在此处阅读有关上述两个代码段之间差异的更多信息：

---

试试

$（“.copies list”）.append（result）；

而不是

$（“.copies list”）.html（result）；

你也可以将你的html添加到问题中吗？@inussha我添加了html，我希望它可读。谢谢@inussha我将html（）更改为append（），但问题仍然存在。我认为单击只起作用一次（与click连接的my console.log只工作一次）。我不知道为什么。

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);
  } 
}

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