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

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

javascript jquery

通过JavaScript而不是AJAX动态添加MDL文本输入,javascript,jquery,material-design-lite,Javascript,Jquery,Material Design Lite,通过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.

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


问题:
我在网上的某个地方找到了解决方案。
在升级DOM之前，我应该添加以下内容：
clonedTxtBox.find('.mdl-textfield').removeClass('is-upgraded').removeAttr('data-upgraded');

$（“#formElements”）。在（“单击”，“Btn添加问题”，
不应该做任何事情，因为。Btn addQuestion
不是#formElements
的后代。你说得对。我刚刚编辑了它。当你克隆元素时，你也在克隆它们的id，id必须是唯一的，这可能是真正的问题。我尝试更改输入的id以及“for”克隆后标签的属性，但它不起作用。这里：有解决这个问题的新线索吗？