动态添加的复选框不可选择 - Material Design Lite (MDL)答案

【问题标题】：Dynamically added checkbox not selectable - Material Design Lite (MDL)动态添加的复选框不可选择 - Material Design Lite (MDL)
【发布时间】：2019-05-15 16:32:32
【问题描述】：

这是我的简单示例。

这个小应用程序使用 jQuery 创建 20 个复选框，使用 #checkbox-template 作为模板。标签的for 属性和每个输入的id 被更改为唯一。

预期行为：每个复选框都应该是可选的。实际
行为：复选框不可选择。

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>My Example</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

</head>

<body>

  <!-- TEMPLATE -->
  <templates style="display: none">

    <div id="checkbox-template">
      <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="podcast-checkbox">
          <input type="checkbox" id="podcast-checkbox" class="mdl-checkbox__input" />
        </label>
    </div>

  </templates>

  <!-- List -->
  <div id="my-list"></div>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>
    $(function() {
      for (var i = 0; i < 20; i++) {
        var newItem = $("<div>");
        newItem.html($("#checkbox-template").html());
        newItem.find("#podcast-checkbox-container").attr("for", "the-item-" + i);
        newItem.find("#podcast-checkbox").attr("id", "the-item-" + i);

        componentHandler.upgradeElement(newItem.get(0));
        newItem.appendTo("#my-list");
      }

    });
  </script>


  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript jquery dom material-design-lite

【解决方案1】：

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>My Example</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

</head>

<body>

  <!-- TEMPLATE -->
  <templates style="display: none">

    <div id="checkbox-template">
      <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="podcast-checkbox">
          <input type="checkbox" id="podcast-checkbox" class="mdl-checkbox__input" />
        </label>
    </div>

  </templates>

  <!-- List -->
  <div id="my-list"></div>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>
    $(function() {
      for (var i = 0; i < 20; i++) {
        var newItem = $(`<div id="checkbox-template"><label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="podcast-checkbox"><input type="checkbox" id="podcast-checkbox the-item-${i}" class="mdl-checkbox__input" /></label></div>`);

        newItem.appendTo("#my-list");
      }

    });
  </script>


  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>

</html>

【讨论】：

newItem 是一个包含标签和复选框的 div 容器。签出以“newItem.html”开头的行。
好的，我明白了，请查看编辑后的答案，希望这就是您正在寻找的答案。

【解决方案2】：

每个标签 for 属性都映射到嵌套的复选框 id。设置完成后，您可以使用componentHandler.upgradeAllRegistered(); 一次性升级所有元素。

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>My Example</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

</head>

<body>

<!-- TEMPLATE -->
  <templates style="display: none">

    <div id="checkbox-template">
      <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="podcast-checkbox">
          <input type="checkbox" id="podcast-checkbox" class="mdl-checkbox__input" />
        </label>
    </div>

  </templates>

  <!-- List -->
  <div id="my-list"></div>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <script>
    $(window).on('load', function() {
      for (var i = 0; i < 5; i++) {
        var newItem = $("<div>");
        newItem.html($("#checkbox-template").html());
        newItem.find("#podcast-checkbox-container").attr("for", "the-item-" + i);
        newItem.find("#podcast-checkbox").attr("id", "the-item-" + i);
        newItem.find("label").attr("for", "the-item-" + i);

        newItem.appendTo("#my-list");
      }
      componentHandler.upgradeAllRegistered();
    });
  </script>
</body>

</html>

【讨论】：

不起作用。 :( 另外，如果您单击 Stack Overflow 上的“运行代码 sn-p”，您可以确认它不起作用。
这是我在 chrome 上测试过的 gif https://imgur.com/a/KDoQ8j6
与加载的窗口一起工作！你认为有什么办法可以在窗口加载后让它工作，这样我就可以更动态地添加这些复选框？
让我们continue this discussion in chat.
@Dough Beney。它确实在窗口加载后工作。这正是你想要的。