Почему .append добавляет блок только один раз? JQuery

Question

По нажатию на #add-button формы в #to-do-list должен появиться блок с карточкой с данными из input и textarea формы. При следующем нажатии кнопки ниже должен появиться новый блок и так далее. Блок появляется только один раз. При новом заполнении формы новый блок не появляется, просто меняются данные в первом созданном. Как реализовать появление новых блоков?

document.querySelector('form').addEventListener('submit', (e) => e.preventDefault()); // Чтобы страница не перезгружалась в Code Snippet-е

$(function() {

  let tmp = `<div class="case">
            <div class="case-title">
            <span></span>
            <div class="clear-button"></div></div>
            <div class="case-body"></div>
         </div>`; // вид карточки

  $('#add-button').on('click', function() {
    let h_val = $('#name-field-input').val().trim(), // значение поля из input
      d_val = $('#description-field').val().trim(); // тоже самое из textarea

    if (h_val.length > 0 && d_val.length > 0) {
      tmp = $(tmp);
      tmp.find('.case-title > span').text(h_val); // вставим в карточку заголовок
      tmp.find('.case-body').text(d_val); // тоже самое с описанием

      $('.fixed-container #to-do-list').append(tmp); // далее добавляем новую карточку 
    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="fixed-container">
  <div id="to-do-list">
    <div class="heading">Список дел:</div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 1 </span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 2</span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
  </div>
  <div id="new-case">
    <div class="heading">Добавить новое дело</div>
    <div class="case">
      <form method="post">
        <label for="name-field">* Название</label>
        <input required="required" id="name-field-input" type="text" name="name-field">
        <label for="description-field">* Описание</label>
        <textarea required="required" id="description-field" name="description-field"></textarea>
        <button id="add-button">Добавить дело</button>
      </form>
    </div>
  </div>
</div>

Answer 1

Можно попробовать вместо

tmp = $(tmp);

написать

tmp = $(tmp).clone();

Но это всё равно будет баговать скорее всего

Надо скорее написать вместо

tmp = $(tmp);

вот так:

let localTemplate =  $(tmp);

и далее работать с localTemplate

т.к. в итоге вы перетираете переменную tmp

Answer 2

Если вам просто надо вставлять текст в темплейт, то предлагаю вариант намного проще и надёжнее:

document.querySelector('form').addEventListener('submit', (e) => e.preventDefault()); // Чтобы страница не перезгружалась в Code Snippet-е

$(function() {

  const tmp = (titleText, bodyText) => `<div class="case">
            <div class="case-title">
            <span>${titleText}</span>
            <div class="clear-button"></div></div>
            <div class="case-body">${bodyText}</div>
         </div>`; // Карточка

  $('#add-button').on('click', function() {
    const h_val = $('#name-field-input').val().trim(), // значение поля input
      d_val = $('#description-field').val().trim(); // значение поля textarea

    if (h_val.length > 0 && d_val.length > 0) {
      $('.fixed-container #to-do-list').append(tmp(h_val, d_val)); // Добавляем новую карточку 
    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="fixed-container">
  <div id="to-do-list">
    <div class="heading">Список дел:</div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 1 </span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 2</span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
  </div>
  <div id="new-case">
    <div class="heading">Добавить новое дело</div>
    <div class="case">
      <form method="post">
        <label for="name-field">* Название</label>
        <input required="required" id="name-field-input" type="text" name="name-field">
        <label for="description-field">* Описание</label>
        <textarea required="required" id="description-field" name="description-field"></textarea>
        <button id="add-button">Добавить дело</button>
      </form>
    </div>
  </div>
</div>

Я ещё вспомнил, что у нас же есть тег template. Можно вообще из JS убрать прописывание шаблона:

document.querySelector('form').addEventListener('submit', (e) => e.preventDefault()); // Чтобы страница не перезгружалась в Code Snippet-е

$(function() {

  const tmp = (titleText, bodyText) => {
    const template = $('#template-case').contents().clone(true);
    
    template.find('.case-title-text').html(titleText);
    template.find('.case-body').html(bodyText);
    
    return template;
  }; // Карточка

  $('#add-button').on('click', function() {
    const h_val = $('#name-field-input').val().trim(), // значение поля input
      d_val = $('#description-field').val().trim(); // значение поля textarea

    if (h_val.length > 0 && d_val.length > 0) {
      $('.fixed-container #to-do-list').append(tmp(h_val, d_val)); // Добавляем новую карточку 
    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="fixed-container">
  <div id="to-do-list">
    <div class="heading">Список дел:</div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 1 </span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 2</span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
  </div>
  <div id="new-case">
    <div class="heading">Добавить новое дело</div>
    <div class="case">
      <form method="post">
        <label for="name-field">* Название</label>
        <input required="required" id="name-field-input" type="text" name="name-field">
        <label for="description-field">* Описание</label>
        <textarea required="required" id="description-field" name="description-field"></textarea>
        <button id="add-button">Добавить дело</button>
      </form>
    </div>
  </div>
</div>

<template id="template-case">
  <div class="case">
    <div class="case-title">
      <span class="case-title-text"></span>
      <div class="clear-button"></div>
    </div>
    <div class="case-body"></div>
  </div>
</template>

Правда это не поддерживается в IE, но так JS можно избавить от HTML кода. Да и как по мне редактировать HTML в html файле намного удобнее, чем в JS, как бы IDE не пытался подсказывать :)

БЛОГ НА HUSL

Почему .append добавляет блок только один раз? JQuery

Ответы (2 шт):