Jquery: append creates multiple new elements in elements before when clicked-CodePudding

I'm creating a personal use website where I want to add "modules" or groups in which I can add links.

The problem I'm facing is when I add a group and start adding links, it all works fine. However when I add another group, afterwards add a link in the first group, it will add two links instead of one (in the first group) but adding a link in the second group adds one.

This scales up with however many groups I have, the last group always works as intended, but the groups before adds additional links to however many groups are underneath itself.

I'd really appreciate any help to understand the problem as I've been going at this for way too long without any progress.

const moduleHTML =
  '<div > \
    <div > \
        <img  src=""> \
        <h2 >Group name</h2> \
        <img  src="assets/close_white_24dp.svg"> \
        <img  src="assets/delete_white_24dp.svg"> \
        <img  src="assets/save_white_24dp.svg"> \
    </div> \
    <div > \
        <p >Add new link...</p> \
    </div> \
</div>';

const linkHTML =
  '<div > \
    <div > \
        <div > \
            <img  src=""> \
            <input type="text" maxlength="16" placeholder="Name..."> \
            <img  src="assets/delete_white_24dp.svg"> \
        </div> \
            <div > \
            <img  src="assets/link_white_24dp.svg"> \
            <input type="url" placeholder="Link..."> \
        </div> \
    </div> \
</div>';


$(document).ready(function() {
  console.log("ready!");

  $('.module-add').on('click', function() {
    console.log('add module');
    $("#module-container").append(moduleHTML);

    $('.module-head-delete').on('click', function() {
      console.log('delete module');
      $(this).closest(".module").remove();
    });

    $(".module-body-container-edit-add").click(function() {
      console.log("add link");
      $(this).closest(".module-body").append(linkHTML);

      $('.module-body-container-edit-delete').on('click', function() {
        console.log('delete link');
        $(this).closest(".module-body-container-outer").remove();
      });
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>
  <title>Daily Links</title>
  <link rel="stylesheet" href="styles.css">
  <script type="text/javascript" src="jquery-3.6.0.js">
  </script>
  <script type="text/javascript" src="scripts.js"></script>
</head>

<body>
  <header >
    <h1>Daily Links</h1>
    <input type="submit"  value="Add module">
  </header>
  <div id="module-container">
  </div>
</body>

</html>

CodePudding user response：

Every time you click on the Add module button you execute

$('.module-body-container-edit-delete').on('click', function...);

This adds another click handler to all the previously created Add new link buttons, so they execute the handler function multiple times, which creates multiple links.

Use event delegation rather than adding a handler every time. See Event binding on dynamically created elements?

$(document).ready(function() {
  console.log("ready!");

  $('.module-add').on('click', function() {
    console.log('add module');
    $("#module-container").append(moduleHTML);

    $('.module-head-delete').on('click', function() {
      console.log('delete module');
      $(this).closest(".module").remove();
    });
  });

  $("#module-container").on("click", ".module-body-container-edit-add", function() {
    console.log("add link");
    $(this).closest(".module-body").append(linkHTML);
  });

  $('#module-container').on('click', '.module-body-container-edit-delete', function() {
    console.log('delete link');
    $(this).closest(".module-body-container-outer").remove();
  });
});

const moduleHTML =
  '<div > \
    <div > \
        <img  src=""> \
        <h2 >Group name</h2> \
        <img  src="assets/close_white_24dp.svg"> \
        <img  src="assets/delete_white_24dp.svg"> \
        <img  src="assets/save_white_24dp.svg"> \
    </div> \
    <div > \
        <p >Add new link...</p> \
    </div> \
</div>';

const linkHTML =
  '<div > \
    <div > \
        <div > \
            <img  src=""> \
            <input type="text" maxlength="16" placeholder="Name..."> \
            <img  src="assets/delete_white_24dp.svg"> \
        </div> \
            <div > \
            <img  src="assets/link_white_24dp.svg"> \
            <input type="url" placeholder="Link..."> \
        </div> \
    </div> \
</div>';

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>
  <title>Daily Links</title>
  <link rel="stylesheet" href="styles.css">
  <script type="text/javascript" src="jquery-3.6.0.js">
  </script>
  <script type="text/javascript" src="scripts.js"></script>
</head>

<body>
  <header >
    <h1>Daily Links</h1>
    <input type="submit"  value="Add module">
  </header>
  <div id="module-container">
  </div>
</body>

</html>