jQuery replaceWith () не заменяет новое значение

Question

У меня есть простой HTML-код с 2 кнопками и скрипт для замены элемента при нажатии каждой кнопки. Когда я нажимаю кнопку 1, он заменяет правильный путь, как и ожидалось. Но продолжайте нажимать кнопку 2, она по-прежнему заменяет старое значение, которое у меня есть, когда нажимаете кнопку 1.

Вот мой код:

jQuery(document).ready(function() {
  $("button[name=btn-add]").on('click', function(e) {
    e.preventDefault();
    let Button_Id = $(this).attr("id")
    console.log(Button_Id);
    let test_content = $("#div-clone");
    stri = '<div>' + Button_Id + '</div>';
    test_content.find('#hello').replaceWith(Button_Id);
    test_content = test_content.html();
    console.log(test_content);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button type="button" class="btn btn-outline-success" name="btn-add" id="1">
  <i class="fas fa-plus fa-1x"></i> 
  <span style="padding-left:3px;"> button 1 </span>
</button>
<button type="button" class="btn btn-outline-success" name="btn-add" id="2">
  <i class="fas fa-plus fa-1x"></i> 
  <span style="padding-left:3px;"> button 2 </span>
</button>
<div name="div_test" id="div-clone" style="display:none">
  <span id="hello"> hello </span>
</div>

Если нажать кнопку 1, а затем нажать кнопку 2:

результат:

// 1 1 // 2 1

ожидаемо:

// 1 1 // 2 2

Answer 1

Проблема в вашем коде заключалась в том, что вы заменяли div, поэтому, когда вы нажимаете второй раз, « hello » div не заменяется, вы можете изменить текст внутри div, как показано ниже.

jQuery(document).ready(function() {
  $("button[name=btn-add]").on('click', function(e) {
      e.preventDefault();
      let Button_Id = $(this).attr("id")
      $("#div-clone").find('#hello').text(Button_Id);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button type="button" class="btn btn-outline-success" name="btn-add" id="1">
  <i class="fas fa-plus fa-1x"></i> 
  <span style="padding-left:3px;"> button 1 </span>
</button>
<button type="button" class="btn btn-outline-success" name="btn-add" id="2">
  <i class="fas fa-plus fa-1x"></i> 
  <span style="padding-left:3px;"> button 2 </span>
</button>
<div name="div_test" id="div-clone">
  <span id="hello"> hello </span>
</div>

Примечание

Если вы хотите добавить элемент, который вы можете использовать, как показано ниже, то есть, хотя он заменяет следующийвремя, когда вы нажимаете, мы заменяем div с id " hello ", чтобы он мог найти его из домена.

$("#div-clone").find('#hello').text('<div id="hello">' + Button_Id + '</div>');

Answer 2

Невозможно найти элемент с идентификатором 'hello' при втором щелчке, поскольку он уже удален. Но вы можете изменить свой код, чтобы снова добавить новый div с идентификатором. Таким образом, вы заменяете <div id="hello">hello</div> на <div id="hello">1</div> или <div id="hello">2</div> в зависимости от идентификатора кнопки, которую вы нажали:

jQuery(document).ready(function() {
  $("button[name=btn-add]").on('click', function(e) {
      e.preventDefault();
      let Button_Id = $(this).attr("id")
      console.log(Button_Id);
      let test_content = $("#div-clone");
      stri = '<div id="hello">' + Button_Id + '</div>';
      test_content.find('#hello').replaceWith(stri);
      test_content = test_content.text();
      console.log(test_content);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button type="button" class="btn btn-outline-success" name="btn-add" id="1">
  <i class="fas fa-plus fa-1x"></i> 
  <span style="padding-left:3px;"> button 1 </span>
</button>
<button type="button" class="btn btn-outline-success" name="btn-add" id="2">
  <i class="fas fa-plus fa-1x"></i> 
  <span style="padding-left:3px;"> button 2 </span>
</button>
<div name="div_test" id="div-clone" style="display:none">
  <span id="hello"> hello </span>
</div>