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文本输入

1 个答案: