JQuery on click lists items only once properly then holds last value all the time

Question

I have strange problem building front-end layer for simple java LibraryApp. I have dynamically created (bootstrap) dropdown buttons which should list readers borrows. Each button works properly but only once for each reader. Then it takes last loaded list and displays it after each click. When I refresh the page it works fine again but only once. Here are my functions:

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

and this one responsible for creating list of elements (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);
  } 
}

About HTML: this button (.return-copy) is dynamically created with all tr content (dependent on how much readers exist). So each is created from 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>

Then after click on .return-copy button the dropdown list is also loaded dynamically (for each reader another list of borrowed books)

I will be very grateful for any ideas what is wrong here.

try `$(".copies-list").append(result);` instead of `$(".copies-list").html(result);` — Inus Saha, Jun 23 '18 at 10:31

Inus Saha · Answer 1 · 2018-06-24T10:40:43.477

0

when you call html function of jQuery it changes the whole html content of the tag.

so i think you need to use $(".copies-list").append(result); to add your elements to copies-list

and also change following:

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

to

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

then try again.

read more about the difference between the above two code snippets here: What is different between $(document).on() and $(element).on()

edited Jun 24 '18 at 10:40

answered Jun 23 '18 at 10:33

Inus Saha

1,918
11
17

Thank you @InusSaha I changed html() to append(), but the problem still exists. I think that click works only once (my console.log connected with click works only once). And I do not know why. – Kakadu Jun 23 '18 at 10:57

JQuery on click lists items only once properly then holds last value all the time

1 Answers1