Javascript 动态添加的复选框不可选-材料设计精简版（MDL）_Javascript_Jquery_Dom_Material Design Lite

Javascript 动态添加的复选框不可选-材料设计精简版（MDL）

javascript jquery dom

Javascript 动态添加的复选框不可选-材料设计精简版（MDL）,javascript,jquery,dom,material-design-lite,Javascript,Jquery,Dom,Material Design Lite,这是我的简单例子这个小应用程序使用jQuery创建了20个复选框，使用#checkbox template作为模板。标签的属性和每个输入的id被更改为唯一预期行为：每个复选框都应该是可选的。实际的行为：复选框不可选择我的例子 $（函数（）{ 对于（变量i=0；i

这是我的简单例子

这个小应用程序使用jQuery创建了20个复选框，使用

#checkbox template

作为模板。标签的

属性和每个输入的id
被更改为唯一

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



我的例子
$（函数（）{
对于（变量i=0；i<20；i++）{
var newItem=$（“”）；
html（$（“#复选框模板”）.html（）；
newItem.find（“#播客复选框容器”）.attr（“for”，“the item-”+i）；
newItem.find（“#播客复选框”）.attr（“id”，“项-”+i）；
componentHandler.upgradeElement（newItem.get（0））；
newItem.appendTo（“我的列表”）；
}
});
属性的每个标签都映射到嵌套的复选框id。
设置此项后，可以使用componentHandler.upgradeAllRegistered（）升级所有元素一次性完成


我的例子
$（窗口）.on（'load'，function（）{
对于（变量i=0；i<5；i++）{
var newItem=$（“”）；
html（$（“#复选框模板”）.html（）；
newItem.find（“#播客复选框容器”）.attr（“for”，“the item-”+i）；
newItem.find（“#播客复选框”）.attr（“id”，“项-”+i）；
newItem.find（“label”）.attr（“for”，“the item-”+i）；
newItem.appendTo（“我的列表”）；
}
componentHandler.upgradeAllRegistered（）；
});
属性的每个标签都映射到嵌套的复选框id。
设置此项后，可以使用componentHandler.upgradeAllRegistered（）升级所有元素一次性完成


我的例子
$（窗口）.on（'load'，function（）{
对于（变量i=0；i<5；i++）{
var newItem=$（“”）；
html（$（“#复选框模板”）.html（）；
newItem.find（“#播客复选框容器”）.attr（“for”，“the item-”+i）；
newItem.find（“#播客复选框”）.attr（“id”，“项-”+i）；
newItem.find（“label”）.attr（“for”，“the item-”+i）；
newItem.appendTo（“我的列表”）；
}
componentHandler.upgradeAllRegistered（）；
});

我的例子
$（函数（）{
对于（变量i=0；i<20；i++）{
var newItem=$（``）；
newItem.appendTo（“我的列表”）；
}
});

我的例子
$（函数（）{
对于（变量i=0；i<20；i++）{
var newItem=$（``）；
newItem.appendTo（“我的列表”）；
}
});
不起作用：（另外，如果单击“运行代码段”在堆栈溢出时，您可以确认它不起作用。这是我在chrome上测试的一个gif，它在加载窗口时起作用！您认为有什么方法可以在加载窗口后使它起作用，这样我就可以更动态地添加这些复选框了吗？让我们来看看。@Beney。它在加载窗口后起作用。这正是您想要的。不起作用。：（另外，如果单击“运行代码段”在堆栈溢出时，您可以确认它不起作用。这是我在chrome上测试的一个gif，它在加载窗口时起作用！您认为有什么方法可以在加载窗口后使它起作用，这样我就可以更动态地添加这些复选框了吗？让我们来看看。@Beney。它在加载窗口后起作用。这正是您想要的。newItem是一个div容器t帽子包含标签和复选框。签出以“newItem.html”开头的行。好的，我知道了，请签出编辑过的答案，希望这就是您要寻找的答案。newItem是一个包含标签和复选框的div容器。签出以“newItem.html”开头的行好的，我明白了，请查看编辑后的答案，希望这就是你要找的答案。
<!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>