Добавление строки в проблемы innerHTML

#javascript #html #css #jquery-select2 #innerhtml

#javascript #HTML #css #jquery-select2 #innerhtml

Вопрос:

Эй, у меня в моем div есть div, который выглядит следующим образом

 <div style="border-radius:2px;
           background-color:#252525;
            display:inline-block;margin-left:1.5%;
            margin-right:1.5%;margin-top:1%;margin-bottom:1%;
            width:94%;max-width:94%;min-width:94%;
            height:100px;max-height:height:100px;
            min-height:height:100px;
            ">
            <span style="display:block;font-size:1.3em;
            margin-bottom: 2px;
            ">Stats conditions</span>
            
            <div style="margin-top:1%;">
            
            
            <div style="margin-left:1.5%;
            margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
            <span style="display:block;font-size:0.8em">Gamemode</span>
            <select id="ann" class="myselect" style="display:block;width: 100%;min-width: 100%;max-width:100%">
            <option value="all">All</option>
            <option value="solo">Solo</option>
            <option value="duos">Duos</option>
            <option value="squads">Squads</option>
            </select>
            </div>
            
            <div style="margin-left:1.5%;
            margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
            <span style="display:block;font-size:0.8em">Stat type</span>
            <select id="ann" class="myselect" style="display:block;width: 100%;min-width: 100%;max-width:100%">
            <option value="kills">kills</option>
            <option value="wins">wins</option>
            <option value="kd">kd</option>
            <option value="scrim-kills">scrim kills</option>
            <option value="scrim-wins">scrim wins</option>
            <option value="scrim-kd">scrim kd</option>
            </select>
            </div>
            
             <div style="margin-left:1.5%;
            margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
            <span style="display:block;font-size:0.8em">Condition type</span>
            <select id="ann" class="myselect" style="display:block;width: 100%;min-width: 100%;max-width:100%">
            <option value="kills">Minimum</option>
            <option value="wins">Maximum</option>
            </select>
            </div>
            
            <div style="
align-tems:center;margin-left:1.5%;margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
<span style="display:block;font-size:0.8em">Enter number</span> 
<input id="everyMinutes" style="font-family:Montserrat;
display:block;width: 100%;min-width: 100%;max-width:100%;
border-radius: 3px;border: none;height: 2.35em;
"
type="number" value="">
            
            </div>
            
            
            
                           
                           
            
            </div>
            
            </div>

Теперь, чтобы добавить еще одну из них, я добавляю не совсем это, но я добавил ее после того, как она была отрисована select2, поэтому открыл ее, нажал f12 и скопировал HTML. Теперь, чтобы добавить еще один из этих div, я добавляю его в HTML контейнеров. Теперь, прежде чем добавлять ее, я щелкнул по всем элементам выбора, и он нормально появился, показывая мои параметры. Теперь, после того, как я добавил строку с помощью метода innerHTML, ни один из select больше не работает

редактировать: https://jsfiddle.net/qt0zvho3/443 редактировать: Чтобы добавить div в контейнер: щелкните левый div ==> просмотр ==> добавить требование к статистике

Ответ №1:

Похоже на это https://jsfiddle.net/5dcfmo6h / работает так, как вы хотите.

Прежде всего, не используйте innerHTML , используйте cloneNode метод.

Во-вторых, уничтожьте select2 перед клонированием узла. Затем снова инициализируйте select2 для всех .myselect элементов.

В-третьих, не используйте одни и те же id атрибуты на странице снова и снова — идентификаторы должны быть уникальными.

JS-код:

 ["modal1", "modal2"].forEach((modalE) => {
  var modal = document.getElementById(modalE);
  var trigger = document.getElementById(`${modalE}-t`);
  var closeButton = document.getElementById(`${modalE}-cb`);

  trigger.addEventListener("click", function () {
    modal.classList.toggle("show-modal");
  });
  closeButton.addEventListener("click", function () {
    modal.classList.toggle("show-modal");
  });
  window.addEventListener("click", function (event) {
    if (event.target === modal) {
      modal.classList.toggle("show-modal");
    }
  });
});

$(".myselect").select2({
    placeholder: "Choose a option",
});

function addStatR(){
  $(".myselect").select2('destroy');

  const clone = document.querySelector('.stats-conditions').cloneNode(true);
  document.getElementById('stats-conditions').appendChild(clone);

  $(".myselect").select2({
    placeholder: "Choose a option",
  });
}

const addStats = document.getElementById("addStatR")
addStats.onclick = addStatR

1. Большое вам спасибо, вы принимаете PayPal, может быть, я могу оставить небольшой совет, кроме того, я использую только те же идентификаторы, потому что я только тестирую, но в любом случае спасибо