Javascript не удалось выполнить для элементов, которые были добавлены позже через Javascript - PullRequest
Новая
       132

Javascript не удалось выполнить для элементов, которые были добавлены позже через Javascript

0 голосов
/ 30 мая 2020

В проекте, над которым я сейчас работаю, есть много элементов, для которых необходимо открыть диалоговое окно. Для каждого нового диалога данные внутри меняются, и это я сделал с помощью Javascript. Теперь, если я добавлю какие-либо элементы, например, флажок в диалоговом окне из Javascript, материал js не будет работать с ним. Итак, я проверил аналогичную проблему и получил ответ, который я реализовал и до сих пор не работает. В этом фрагменте я сделал аналогичную ситуацию. Кнопка «Добавить» используется для добавления в диалоговое окно, и при открытии диалогового окна флажок не работает, как в диалоговом окне во время загрузки страницы. Чтобы показать это, я добавил флажок перед ним, а не из Javascript. После добавления флажка из Javascript старый существующий флажок также не работает.

Пожалуйста, помогите мне, это очень поможет. 

function resetJs(path) {
  var scripts = document.getElementsByTagName('script'),
    newScript = document.createElement("script");

  newScript.src = path + "?timestamp=" + Math.round(new Date().getTime() / 1000);

  for (var i = 0; i < scripts.length; ++i) {
    var srcUrl = scripts[i].getAttribute('src');
    if (srcUrl && srcUrl.indexOf(path) > -1) {
      scripts[i].parentNode.replaceChild(newScript, scripts[i]);
    }
  }
}
var dialog = document.querySelector('dialog');

var addData = document.querySelector('#add');
addData.addEventListener('click', function() {
  var data = document.querySelector('#dialogContent');
  data.innerHTML += '<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1"><input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked><span class="mdl-checkbox__label">Checkbox From JS</span></label>';

});



var showDialogButton = document.querySelector('#show-dialog');
if (!dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function() {

  dialog.showModal();
  resetJs('https://code.getmdl.io/1.3.0/material.min.js');
});
dialog.querySelector('.close').addEventListener('click', function() {
  dialog.close();
});
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<button id="show-dialog" type="button" class="mdl-button">Show Dialog</button>
<button id="add" type="button" class="mdl-button">Add</button>
<dialog class="mdl-dialog">
  <h4 class="mdl-dialog__title">Allow data collection?</h4>
  <div class="mdl-dialog__content" id="dialogContent">
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1"><input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked><span class="mdl-checkbox__label">Checkbox Added Before</span></label>
    <p>
      Allowing us to collect data will let us get you the information you want faster.
    </p>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button">Agree</button>
    <button type="button" class="mdl-button close">Disagree</button>
  </div>
</dialog>

1 Ответ

1 голос
/ 30 мая 2020

Из документов mdl здесь

Material Design Lite автоматически зарегистрирует и отобразит все элементы, отмеченные классами MDL, при загрузке страницы. Однако в случае, когда вы создаете элементы DOM динамически, вам необходимо зарегистрировать новые элементы с помощью функции upgradeElement.

Итак, все, что вы можете сделать, это ваша функция addData; 

var addData = document.querySelector("#add");
  addData.addEventListener("click", function() {
    var data = document.querySelector("#dialogContent");
    var label = document.createElement("label");
    label.className = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect";
    label.innerHTML =
      '<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked><span class="mdl-checkbox__label">Checkbox From JS</span>';
    label.htmlFor = "checkbox-1";
    componentHandler.upgradeElement(label);
    data.appendChild(label);
  });

Вам необходимо использовать componentHandler.upgradeElement, чтобы обновить ваш динамически созданный элемент до материального элемента, а затем добавить дочерний элемент к данным.

Пожалуйста, взгляните на это codeandbox

...