通过 JavaScript 而不是通过 AJAX 动态添加 MDL 文本输入答案

【问题标题】：Dynamically Adding an MDL Text Input via JavaScript, not via AJAX通过 JavaScript 而不是通过 AJAX 动态添加 MDL 文本输入
【发布时间】：2019-06-05 18:09:52
【问题描述】：

通过 AJAX 动态添加文本输入并使用 componentHandler.upgradeDom() 效果很好。但是，当我单独使用 JavaScript 克隆文本输入时，该功能没有帮助。

<html>
  <head>
      <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
      <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-amber.min.css">
  </head>
    <body>
        <div id="formElements">
            <div class="formElementGroup">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                      <label class="mdl-textfield__label" for="Q1">Question</label><input type="text" class="mdl-textfield__input" id="Q1" name="Q1[]">
                </div>
            </div>
            <div id="Qs1"></div>
            <div align="left">
              <a id="Btn-addQuestion" class="Btn-addQuestion">
                Add another text field
              </a>
            </div>
        </div>

        <script>
          $(document).ready(function(){
            $("#formElements").on("click", ".Btn-addQuestion", function(){
              clonedTxtBox = $("#Q1").parents(".formElementGroup").clone(true);
              clonedTxtBox.appendTo("#Qs1");
              setTimeout(function(){
                componentHandler.upgradeDom();
              }, 1000);
            });
          });
        </script>
    </body>
</html>

我希望克隆文本输入的标签向上移动并变小，因为它的设计行为。然而，只有原始的可以——克隆的没有；即使用户在里面输入内容，它也会停留在文本输入上。

任何帮助将不胜感激。

JS 小提琴： https://jsfiddle.net/jp26f0ts/

【问题讨论】：

$("#formElements").on("click", ".Btn-addQuestion", 应该什么都不做，因为.Btn-addQuestion 不是#formElements 的后代
你是对的。我刚刚编辑了它。
当你克隆你的元素时，你也在克隆它们的 ID，并且 ID 必须是唯一的，这可能是真正的问题
我尝试在克隆后更改输入的 id 以及标签的“for”属性，但它不起作用。这里：jsfiddle.net/gc4qzfxn
有解决这个问题的新线索吗？

标签： javascript jquery material-design-lite

【解决方案1】：

我在网上某处找到了解决方案。在升级 DOM 之前，我应该添加以下内容：

clonedTxtBox.find('.mdl-textfield').removeClass('is-upgraded').removeAttr('data-upgraded');

【讨论】：