Динамически добавленный флажок не выбирается - Material Design Lite (MDL) - PullRequest
Новая
       21

Динамически добавленный флажок не выбирается - Material Design Lite (MDL)

1 голос
/ 15 мая 2019

Вот мой простой пример.

Это небольшое приложение создает 20 флажков с помощью jQuery, используя #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>

Ответы [ 2 ]

0 голосов
/ 15 мая 2019 
<!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>
0 голосов
/ 15 мая 2019

Каждый ярлык для атрибута сопоставляется с вложенными флажками 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>
...