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

在我目前正在处理的项目中，有许多项需要打开对话框。对于每个新对话框，其中的数据都会发生变化，我已经使用Javascript完成了这些变化。现在，如果我从Javascript向对话框中添加任何元素，比如说复选框，那么js材料就不起作用了。所以我检查了一个类似的问题，得到了一个答案，我已经实现了，但仍然不起作用。 在这个片段中，我提出了类似的情况。“添加”按钮用于添加到对话框中，当对话框打开时，复选框的行为与页面加载期间对话框中的行为不同。为了显示这一点，我在其前面添加了一个复选框，而不是Javascript。从Javascript添加复选框后，旧的现有复选框也不起作用

请帮帮我，这会很有帮助的

函数resetJs（路径）{
var scripts=document.getElementsByTagName（'script'），
newScript=document.createElement（“脚本”）；
newScript.src=path+“？timestamp=“+Math.round（new Date（）.getTime（）/1000）；
对于（变量i=0；i-1）{
脚本[i].parentNode.replaceChild（newScript，脚本[i]）；
}
}
}
var dialog=document.querySelector（'dialog'）；
var addData=document.querySelector（'#add'）；
addData.addEventListener（'单击'，函数（））{
var data=document.querySelector（“#dialogContent”）；
data.innerHTML+=“来自JS的复选框”；
});
var showDialogButton=document.querySelector（“#show dialog”）；
如果（！dialog.showmodel）{
dialogPolyfill.registerDialog（对话框）；
}
showDialogButton.addEventListener（'单击'，函数（））{
dialog.showmodel（）；
resetJs（'https://code.getmdl.io/1.3.0/material.min.js');
});
dialog.querySelector（'.close'）.addEventListener（'click'，function（））{
dialog.close（）；
});

显示对话框
添加
允许数据收集吗？
之前添加的复选框

允许我们收集数据将让我们更快地为您获取所需信息。

同意
不同意
来自
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);
  });


var addData=document.querySelector（“添加”）；
addData.addEventListener（“单击”，函数（）{
var data=document.querySelector（“dialogContent”）；
var label=document.createElement（“标签”）；
label.className=“mdl复选框mdl js复选框mdl js涟漪效应”；
label.innerHTML=
'来自JS的复选框'；
label.htmlFor=“复选框-1”；
componentHandler.upgradeElement（标签）；
数据。追加子项（标签）；
});

您需要使用componentHandler.upgradeElement将动态创建的元素升级为material元素，然后将子元素附加到数据中

请看一下这个
谢谢你的帮助。但这里有一个问题，在我添加了一个复选框后，旧的复选框只起作用，而新创建的复选框不起作用。很好，谢谢，我知道了怎么做。谷歌搜索了
componentHandler
，发现这个函数
componentHandler.upgradeAllRegistered（）
这个函数非常适合我的要求。问题是输入具有相同的id。因此，我添加了一个计数器并进行了排序。