代码之家 › 专栏 › 技术社区 › Rasec219

在脚本上使用append创建MDL输入后,无法使标签在MDL输入上工作;

dynamic html jquery

Rasec219 · 技术社区 · 6 年前

这就是我使用的代码,我使用append在脚本上创建输入,并在container div上生成它,但是当创建输入时,mdl标签无法按预期工作。我希望它删除带有文本的标签。。。当我开始写按钮创建的输入,但不幸的是它没有。尝试使用componentHandler。upgradeElement(“容器”);但我无法让它工作,所以它用多个标签升级了整个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

1 回复 | 直到 6 年前

Reinstate Monica Cellio 6 年前

材质库中有一种方法可用于升级动态创建的图元。您需要调用它并向其传递对您创建的任何新元素的引用,在本例中为container 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>