Динамическое добавление ввода текста MDL через JavaScript, а не через AJAX - PullRequest
Новая
       21

Динамическое добавление ввода текста MDL через JavaScript, а не через AJAX

0 голосов
/ 05 июня 2019

Динамическое добавление ввода текста через 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/

1 Ответ

0 голосов
/ 13 июня 2019

Я нашел решение где-то в сети. Перед обновлением DOM, я должен был добавить это: 

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