时间戳

首页 > 解决方案 > 稍后通过 Javascript 添加的元素上的 Javascript 执行失败

javascript - 稍后通过 Javascript 添加的元素上的 Javascript 执行失败

问题描述

在我目前正在处理的一个项目中，有许多项目必须打开一个对话框。对于每个新对话框，里面的数据都会发生变化，而我已经使用 Javascript 完成了这些数据。现在，如果我从 Javascript 向对话框中添加任何元素，例如复选框，则 Material 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>

标签： javascriptdom-eventsmaterial-design-lite

解决方案

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

请看一下这个代码框

推荐阅读