动态添加Dialog元素后Material JS失效及原有元素异常求助

我刚看完你的问题，核心问题出在MDL组件的初始化机制和你用的resetJs方法上，咱们一步步拆解：

问题根源 #

MDL的组件（比如checkbox）是在页面首次加载时通过componentHandler自动初始化的，动态添加的DOM元素不会自动触发MDL的样式和交互绑定。而你用resetJs重新加载整个MDL脚本的做法，会把已有的组件实例全部销毁，反而导致原有checkbox也失效了——这完全是帮倒忙😅

另外还有个小坑：你动态添加的checkbox用了和原有元素一样的id="checkbox-1"，ID重复会导致DOM选择器混乱，这也是交互异常的诱因之一。

正确解决方案 #

不用重新加载MDL脚本，而是利用MDL提供的componentHandler API来单独升级新添加的元素，同时确保动态元素的ID唯一。

修改后的完整代码 #

<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>

<script>
var dialog = document.querySelector('dialog');
var addData = document.querySelector('#add');
// 用计数器确保动态添加的checkbox ID唯一
var checkboxCounter = 2;

addData.addEventListener('click', function() {
  var data = document.querySelector('#dialogContent');
  // 创建唯一ID的checkbox元素
  var newCheckboxHtml = `
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-${checkboxCounter}">
      <input type="checkbox" id="checkbox-${checkboxCounter}" class="mdl-checkbox__input" checked>
      <span class="mdl-checkbox__label">Checkbox From JS ${checkboxCounter}</span>
    </label>
  `;
  data.innerHTML += newCheckboxHtml;
  
  // 关键：升级新添加的MDL组件
  var newCheckbox = document.querySelector(`#checkbox-${checkboxCounter}`);
  componentHandler.upgradeElement(newCheckbox.closest('.mdl-checkbox'));
  
  checkboxCounter++;
});

var showDialogButton = document.querySelector('#show-dialog');
if (!dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function() {
  dialog.showModal();
  // 移除重置MDL脚本的代码，不需要！
});

dialog.querySelector('.close').addEventListener('click', function() {
  dialog.close();
});
</script>

关键修改点说明 #

1. 移除resetJs函数：重新加载MDL脚本会销毁所有已初始化的组件，这是原有checkbox失效的直接原因。
2. 唯一ID生成：用checkboxCounter确保每个动态添加的checkbox有唯一ID，避免DOM冲突。
3. 手动升级组件：每次添加新元素后，调用componentHandler.upgradeElement()，传入新添加的MDL组件容器（这里是.mdl-checkbox标签），让MDL为其绑定样式和交互事件。
   • 如果一次添加多个组件，也可以用componentHandler.upgradeDom()来批量升级，但单独升级更高效。

这样修改后，不管是原有checkbox还是动态添加的，都能正常触发MDL的交互效果了。

内容的提问来源于stack exchange，提问作者Sreekanta B S V