对后来通过Javascript添加的元素执行Javascript失败

Question

在我目前正在研究的项目中，有许多项目必须打开对话框。对于每个新对话框，内部数据都会发生变化，而我使用Javascript完成了这些操作。现在，如果我从Javascript向对话框添加任何元素（例如说一个复选框），则材质js将无法正常工作。因此，我检查了一个类似的问题并得到了答案，该答案已经实现并且仍然无法正常工作。在这个片段中，我也遇到了类似的情况。 “添加”按钮用于添加到对话框，并且当“对话框”打开时，复选框在页面加载期间的行为不如对话框中的行为。为了显示这一点，我在其本身之前添加了一个Checkbox，而不是从Javascript添加。从Javascript添加Checkbox后，旧的现有复选框也不起作用。

[请帮助我，会很有帮助。

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>

Answer 1

从mdl here的文档中>

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来将动态创建的元素升级为Material元素，然后将该子元素附加到数据中。

请查看此codesandbox