Jquery: append 在 elements before when clicked 中创建多个新元素

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

我正在创建一个个人使用网站,我想在其中添加“模块”或可以添加 link 的组。

我面临的问题是当我添加一个组并开始添加 link 时,一切正常。但是,当我添加另一组时,之后在第一组中添加一个 link,它将添加两个 link 而不是一个(在第一组中),但在第二组中添加一个 link小组加一。

无论我有多少组,这都会扩大规模,最后一个组总是按预期工作,但之前的组会向其下方的许多组添加额外的 links。

我真的很感激任何帮助理解这个问题,因为我已经在这个问题上做了太长时间而没有任何进展。

const moduleHTML =
  '<div class="module"> \
    <div class="module-head"> \
        <img class="module-head-logo" src=""> \
        <h2 class="module-head-name">Group name</h2> \
        <img class="module-head-cancel" src="assets/close_white_24dp.svg"> \
        <img class="module-head-delete" src="assets/delete_white_24dp.svg"> \
        <img class="module-head-save" src="assets/save_white_24dp.svg"> \
    </div> \
    <div class="module-body"> \
        <p class="module-body-container-edit-add">Add new link...</p> \
    </div> \
</div>';

const linkHTML =
  '<div class="module-body-container-outer"> \
    <div class="module-body-container"> \
        <div class="module-body-container-edit-name"> \
            <img class="module-body-container-image" src=""> \
            <input type="text" maxlength="16" placeholder="Name..."> \
            <img class="module-body-container-edit-delete" src="assets/delete_white_24dp.svg"> \
        </div> \
            <div class="module-body-container-edit-link"> \
            <img class="module-body-container-image" 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 class="header-container">
    <h1>Daily Links</h1>
    <input type="submit" class="module-add" value="Add module">
  </header>
  <div id="module-container">
  </div>
</body>

</html>

每次你点击Add module按钮你执行

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

这会向所有先前创建的 Add new link 按钮添加另一个点击处理程序,因此它们会多次执行处理程序函数,从而创建多个链接。

使用事件委托而不是每次都添加处理程序。参见 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 class="module"> \
    <div class="module-head"> \
        <img class="module-head-logo" src=""> \
        <h2 class="module-head-name">Group name</h2> \
        <img class="module-head-cancel" src="assets/close_white_24dp.svg"> \
        <img class="module-head-delete" src="assets/delete_white_24dp.svg"> \
        <img class="module-head-save" src="assets/save_white_24dp.svg"> \
    </div> \
    <div class="module-body"> \
        <p class="module-body-container-edit-add">Add new link...</p> \
    </div> \
</div>';

const linkHTML =
  '<div class="module-body-container-outer"> \
    <div class="module-body-container"> \
        <div class="module-body-container-edit-name"> \
            <img class="module-body-container-image" src=""> \
            <input type="text" maxlength="16" placeholder="Name..."> \
            <img class="module-body-container-edit-delete" src="assets/delete_white_24dp.svg"> \
        </div> \
            <div class="module-body-container-edit-link"> \
            <img class="module-body-container-image" 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 class="header-container">
    <h1>Daily Links</h1>
    <input type="submit" class="module-add" value="Add module">
  </header>
  <div id="module-container">
  </div>
</body>

</html>