Question

这是我使用的代码，即使用append在脚本上创建输入并在容器div上生成它，但是当创建输入时，mdl标签不能按预期工作。我希望它删除带有文本的标签...当我开始写按钮创建的输入但不幸的是它没有。尝试使用componentHandler.upgradeElement（“＃container”）;但我不能让它工作，所以它用多个标签升级整个div。

     
var contador=1;
    $("#somebutton").click(function () {
        contador++;
        $("#container").append(
        '<div class="mdl-textfield mdl-js-textfield"><input class="mdl-textfield__input" type="text" id="sample1'+contador+'"><label class="mdl-textfield__label" for="sample1'+contador+'">Text...</label></div><div class="mdl-textfield mdl-js-textfield"><input class="mdl-textfield__input" type="text" id="sample1'+contador+'"><label class="mdl-textfield__label" for="sample1'+contador+'">Text...</label></div>');   
                   
    });

<html>
  <head>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"
       integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
       crossorigin="anonymous"></script>

    <!-- Material Design Lite -->
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <!-- Simple Textfield -->
      <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="text" id="sample1">
        <label class="mdl-textfield__label" for="sample1">Text...</label>
      </div>
    <div id="container"></div>
    <input type="button" style="width:100px" id="somebutton" />
  </body>
</html>

链接到代码 Link to code that i use with jquery

Answer 1

Material库中有一个方法可以升级您动态创建的元素。您需要调用它并将其传递给您创建的任何新元素，在本例中为容器div。将其作为$div[0]传递，以便它传递DOM元素，而不是包装的jQuery对象。

var contador=1;

$("#somebutton").click(function () {
    contador++;

    var $div = $('<div class="mdl-textfield mdl-js-textfield"><input class="mdl-textfield__input" type="text" id="sample1'+contador+'"><label class="mdl-textfield__label" for="sample1'+contador+'">Text...</label></div>');

    // tell the material library about the new elements
    componentHandler.upgradeElement($div[0]);

    $("#container").append($div);
});

<html>
  <head>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"
       integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
       crossorigin="anonymous"></script>

    <!-- Material Design Lite -->
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <!-- Simple Textfield -->
      <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="text" id="sample1">
        <label class="mdl-textfield__label" for="sample1">Text...</label>
      </div>
    <div id="container"></div>
    <input type="button" style="width:100px" id="somebutton" />
  </body>
</html>

使用附加脚本创建标签后，无法使标签在MDL输入上起作用;

1 个答案: