Как правильно клонировать и обновить идентификаторы материалов и селекторов? - PullRequest
Новая
       13

Как правильно клонировать и обновить идентификаторы материалов и селекторов?

0 голосов
/ 26 апреля 2019

Я клонирую блок элементов формы Materialise, включая пару элементов выбора, средство выбора времени и текстовое поле с событием нажатия кнопки. Текущий код использует счетчик для увеличения идентификатора и метки. Как и ожидалось, это работает для базовых входных данных, таких как текстовое поле, но для таких элементов, как select или picker, где Materialise динамически внедряет свой собственный JS с хешированными идентификаторами для нескольких элементов, без кубиков. Как правильно клонировать селекторы и сборщики, чтобы они работали?

Я попытался вручную изменить клонированные идентификаторы в консоли разработчика Chrome (глядя на совпадающие хэши), чтобы посмотреть, смогу ли я хотя бы активировать селекторы или средство выбора, но все еще не работает и без ошибок. Работает только начальный блок. Я думал, что, может быть, если бы я мог заставить элементы хотя бы вызвать срабатывание, я мог бы написать некоторый код для выбора или выбрать отдельно. Не уверен, что я переосмыслил это.

Глупый способ, с помощью которого я начал работать, заключается в создании максимального числа блоков в html, а не клонировании, скрытии всего, кроме первого, затем ручном обновлении идентификаторов и последующем отображении каждого нажатия кнопки. Все они работают таким образом, но, конечно, это не СУХОЙ, и я должен иметь дело с государством.

Вот мой код для попытки клонирования:

HTML: 

<div class="container">
   <div id="mealRequests" class="row">
      <!-- Meal Request #1 -->
      <div class="input-field col s12 meal-request-block">
         <div class="row ">
            <div class="input-field col s12 m6">
               <select id="mealType01">
                  <option value="" disabled selected>Choose your option</option>
                  <option value="Breakfast">Breakfast</option>
                  <option value="Lunch">Lunch</option>
                  <option value="Snack">Snack</option>
                  <option value="Cocktail">Cocktail</option>
               </select>
               <label for="mealType01">Meal type</label>
            </div>
            <div class="input-field col s12 m6">
               <input id="consumptionTime01" type="text" class="timepicker" autocomplete="off" placeholder="09:00 AM">
               <label for="consumptionTime01">Consumption time</label>
            </div>
         </div>
         <div class="row">
            <div class="input-field col s12">
               <select id="vendorChoice01">
                 <option value="" disabled selected>Choose your option</option>
                 <option value="Dig Inn">Dig Inn</option>
                 <option value="Pret">Pret</option>
                 <option value="Au Bon Pain">Au Bon Pain</option>
               </select>
               <label for="vendorChoice01">Vendor</label>
            </div>
         </div>
         <div class="row">
            <div class="input-field col s12">
               <textarea id="menuRequest01" class="materialize-textarea" placeholder="Farmers plate"></textarea>
               <label for="menuRequest01">Menu selections</label>
            </div>
         </div>
      </div>
   </div>
  <div class="row">
    <div class="col s12">
      <button id="addMealRequestBtn" class="btn-text"><i class="material-icons">+</i> Add another meal request</button>
    </div>
  </div>
</div>

JS: 

// Initialize Materialize's select and datepicker
$('select').formSelect();
$('.timepicker').timepicker(); 

    // Add click handler for meal requests
    var addMealRequest = function () {

      var $row = $('.meal-request-block').parent(),
          $template = $('.meal-request-block:first').clone(),         
          counter = 1, // used for incrementing input IDs
          limit = 2; // sets a max limit on the total number of clones

      $('#addMealRequestBtn').on('click', function(e) {
        e.preventDefault();
        var $totalCount = $('.meal-request-block').length;

        counter++;

        if ($totalCount < limit) {
          $template.clone().find('.timepicker-modal, select, input, textarea').each(function () {

            //set id to store the updated section number
            var newId = this.id + counter;

            //update for label
            $(this).next().attr('for', newId).addClass('active');

            //update id
            this.id = newId;

          }).end()

          .appendTo($row);  
        }        
      });
    };

    addMealRequest();

CSS: 

.input-field div.error {
  position: relative;
  top: -.25rem;
  left: 0rem;
  font-size: 0.8rem;
  color: red;
  transform: translateY(0%);
}

.meal-request-block {
  background-color: #f0f0f0;
  padding: 24px!important;
}

  .btn-text {
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    opacity: 1;
    padding: 0;
    transition: all .25s ease;
    &:focus {
      background: transparent;
    }
    &:hover {
      opacity: .75;
    }
  }

И базовая ручка: https://codepen.io/anon/pen/GLzEvw

Вот пример того, как выглядит код после того, как Materialise внедряет его в JS:

SELECT: 

<div class="input-field col s12 m6">
  <div class="select-wrapper">
    <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-db214a65-6ab6-0918-fd05-e3c7cc84a074">
    <ul id="select-options-db214a65-6ab6-0918-fd05-e3c7cc84a074" class="dropdown-content select-dropdown" tabindex="0">
      <li class="disabled selected" id="select-options-db214a65-6ab6-0918-fd05-e3c7cc84a0740" tabindex="0"><span>Choose your option</span></li>
      <li id="select-options-db214a65-6ab6-0918-fd05-e3c7cc84a0741" tabindex="0"><span>Breakfast</span></li>
      <li id="select-options-db214a65-6ab6-0918-fd05-e3c7cc84a0742" tabindex="0"><span>Lunch</span></li>
      <li id="select-options-db214a65-6ab6-0918-fd05-e3c7cc84a0743" tabindex="0"><span>Snack</span></li>
      <li id="select-options-db214a65-6ab6-0918-fd05-e3c7cc84a0744" tabindex="0"><span>Cocktail</span></li>
    </ul>
    <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 10l5 5 5-5z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
    <select id="mealType01" tabindex="-1">
      <option value="" disabled="" selected="">Choose your option</option>
      <option value="Breakfast">Breakfast</option>
      <option value="Lunch">Lunch</option>
      <option value="Snack">Snack</option>
      <option value="Cocktail">Cocktail</option>
    </select>
  </div>
  <label for="mealType01">Meal type</label>
</div>

TIME PICKER: 

<div class="input-field col s12 m6">
  <div class="modal timepicker-modal" id="modal-1bc17566-dd57-4454-0735-057dc30e2263" tabindex="0" style="z-index: 1003; display: none; opacity: 0; top: 4%; transform: scaleX(0.8) scaleY(0.8);">
    <div class="modal-content timepicker-container">
      <div class="timepicker-digital-display">
        <div class="timepicker-text-container">
          <div class="timepicker-display-column"><span class="timepicker-span-hours">12</span>:<span class="timepicker-span-minutes text-primary">30</span></div>
          <div class="timepicker-display-column timepicker-display-am-pm">
            <div class="timepicker-span-am-pm">
              <div class="am-btn">AM</div>
              <div class="pm-btn text-primary">PM</div>
            </div>
          </div>
        </div>
      </div>
      <div class="timepicker-analog-display">
        <div class="timepicker-plate">
          <div class="timepicker-canvas">
            <svg class="timepicker-svg" width="270" height="270">
              <g transform="translate(135,135)">
                <line x1="0" y1="0" x2="1.0409497792752502e-14" y2="85"></line>
                <circle class="timepicker-canvas-bg" r="20" cx="1.2858791391047208e-14" cy="105"></circle>
                <circle class="timepicker-canvas-bearing" cx="0" cy="0" r="4"></circle>
              </g>
            </svg>
          </div>
          <div class="timepicker-dial timepicker-hours timepicker-dial-out" style="visibility: hidden;">
            <div class="timepicker-tick" style="left: 167.5px; top: 24.0673px;">1</div>
            <div class="timepicker-tick" style="left: 205.933px; top: 62.5px;">2</div>
            <div class="timepicker-tick" style="left: 220px; top: 115px;">3</div>
            <div class="timepicker-tick" style="left: 205.933px; top: 167.5px;">4</div>
            <div class="timepicker-tick" style="left: 167.5px; top: 205.933px;">5</div>
            <div class="timepicker-tick" style="left: 115px; top: 220px;">6</div>
            <div class="timepicker-tick" style="left: 62.5px; top: 205.933px;">7</div>
            <div class="timepicker-tick" style="left: 24.0673px; top: 167.5px;">8</div>
            <div class="timepicker-tick" style="left: 10px; top: 115px;">9</div>
            <div class="timepicker-tick" style="left: 24.0673px; top: 62.5px;">10</div>
            <div class="timepicker-tick" style="left: 62.5px; top: 24.0673px;">11</div>
            <div class="timepicker-tick" style="left: 115px; top: 10px;">12</div>
          </div>
          <div class="timepicker-dial timepicker-minutes" style="visibility: visible;">
            <div class="timepicker-tick" style="left: 115px; top: 10px;">00</div>
            <div class="timepicker-tick" style="left: 167.5px; top: 24.0673px;">05</div>
            <div class="timepicker-tick" style="left: 205.933px; top: 62.5px;">10</div>
            <div class="timepicker-tick" style="left: 220px; top: 115px;">15</div>
            <div class="timepicker-tick" style="left: 205.933px; top: 167.5px;">20</div>
            <div class="timepicker-tick" style="left: 167.5px; top: 205.933px;">25</div>
            <div class="timepicker-tick" style="left: 115px; top: 220px;">30</div>
            <div class="timepicker-tick" style="left: 62.5px; top: 205.933px;">35</div>
            <div class="timepicker-tick" style="left: 24.0673px; top: 167.5px;">40</div>
            <div class="timepicker-tick" style="left: 10px; top: 115px;">45</div>
            <div class="timepicker-tick" style="left: 24.0673px; top: 62.5px;">50</div>
            <div class="timepicker-tick" style="left: 62.5px; top: 24.0673px;">55</div>
          </div>
        </div>
        <div class="timepicker-footer">
          <button class="btn-flat timepicker-clear waves-effect" style="visibility: hidden;" type="button" tabindex="3">Clear</button>
          <div class="confirmation-btns"><button class="btn-flat timepicker-close waves-effect" type="button" tabindex="3">Cancel</button><button class="btn-flat timepicker-close waves-effect" type="button" tabindex="3">Ok</button></div>
        </div>
      </div>
    </div>
  </div>
  <input id="consumptionTime01" type="text" class="timepicker" autocomplete="off" placeholder="09:00 AM">
  <label for="consumptionTime01" class="active">Consumption time</label>
</div>

Подводя итог, как я могу клонировать селекторы и сборщики, чтобы они действительно работали? Таргетинг на их идентификаторы правильно? Как использовать API-интерфейс Materialise для этого? На данный момент я просто инициализирую селекторы и таймеры во всем мире.

1 Ответ

0 голосов
/ 27 апреля 2019

Мне кажется, что ваши обработчики событий не привязаны к вашим динамически созданным (клонированным) элементам.

Обычно любые обработчики событий, связанные с исходным элементом, не копируются в клон.

Посмотрите на эту запись

Я бы добавил это как комментарий, но в настоящее время я не могу оставлять комментарии.

...