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

Question

通过 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 Fiddle: https://jsfiddle.net/jp26f0ts/

Answer 1

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

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

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

Dynamically Adding an MDL Text Input via JavaScript, not via AJAX

javascript

jquery

material-design-lite