Блог

Главная - Вопросы по программированию - Добавление клонированного узла в DOM с помощью jQuery

Добавление клонированного узла в DOM с помощью jQuery

#javascript #html #jquery #dom #clone

#javascript #HTML #jquery #dom #клонировать

Вопрос:

У меня есть следующий код (ССЫЛКА), который отлично работает для клонирования блочной HTML-структуры. Проблема в том, что мне нужно исправить новую добавленную структуру в DOM. Но когда я обновляю страницу, я теряю добавленный блок. Как я могу постоянно добавлять новый добавленный блок?

 var regex = /^(. ?)(d )$/i;
var cloneIndex = $(".clonedInput").length;

function clone() {
  $(this).parents(".clonedInput").clone()
    .appendTo("body")
    .attr("id", "clonedInput"   cloneIndex)
    .find("*")
    .each(function() {
      var id = this.id || "";
      var match = id.match(regex) || [];
      if (match.length == 3) {
        this.id = match[1]   (cloneIndex);
      }
    })
    .on('click', 'button.clone', clone)
    .on('click', 'button.remove', remove);
  cloneIndex  ;
}

function remove() {
  $(this).parents(".clonedInput").remove();
}
$("button.clone").on("click", clone);

$("button.remove").on("click", remove);  
 body {
  padding: 10px;
}

.clonedInput {
  padding: 10px;
  border-radius: 5px;
  background-color: #def;
  margin-bottom: 10px;
}

.clonedInput div {
  margin: 5px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="clonedInput1" class="clonedInput">
  <div>
    <label for="txtCategory" class="">Learning category <span class="requiredField">*</span></label>
    <select class="" name="txtCategory[]" id="category1">
      <option value="">Please select</option>
    </select>
  </div>
  <div>
    <label for="txtSubCategory" class="">Sub-category <span class="requiredField">*</span></label>
    <select class="" name="txtSubCategory[]" id="subcategory1">
      <option value="">Please select category</option>
    </select>
  </div>
  <div>
    <label for="txtSubSubCategory">Sub-sub-category <span class="requiredField">*</span></label>
    <select name="txtSubSubCategory[]" id="subsubcategory1">
      <option value="">Please select sub-category</option>
    </select>
  </div>
  <div class="actions">
    <button class="clone">Clone</button>
    <button class="remove">Remove</button>
  </div>
</div>

Комментарии:

1. В будущем избегайте ссылок на код, но не встраивайте его. Вы должны были получить сообщение об ошибке проверки. Похоже, вы обошли это, заключив текст ссылки в метки, которые даже не отображают ссылку и фактически СКРЫВАЮТ ее от нажатия…

2. Чтобы сохранить содержимое, которое вы динамически добавили, вам необходимо сохранить состояние перед закрытием окна. Вам нужно будет иметь возможность как сохранять состояние, так и воспроизводить его. jQuery не сделает этого за вас. Вам понадобится ваш собственный алгоритм или плагин.

Ответ №1:

Вы не можете использовать JavaScript (или jQuery) для изменения HTML, возвращаемого сервером. Вам нужно будет повторно запускать код jQuery при каждой загрузке страницы, если вы хотите, чтобы эффекты отображались при обновлении страницы.

Если вы пытаетесь настроить страницу так, чтобы она отражала выбор пользователя, вы можете сохранить эти выборы localStorage и прочитать их при загрузке страницы, чтобы повторно воспроизвести любые необходимые изменения.

 // when the user makes a selection:
localStorage.setItem('category1', 'Some Selection');

// then when the page loads:
const category1 = localStorage.getItem('category1');
if (category1) {
  // Your DOM modifying code here
}