Как заставить заработать связаные select при динамически загружаемом содержимом из повторителя ACF (Wordpress)?

уважаемые коллеги!Помогите, пожалуйста, всю голову уже сломал...

Есть обычные связанные списки через jquery chained (от https://github.com/tuupola/jquery_chained).

Через ACF подтягиваю содержимое из полей повторителей - и ничего не работает (я имею в виду, что динамически созданное содержимое и значения селектов без jquery chained выводятся отлично, но стоит подключить скрипт, тупо пропадает большая часть option). Я так понимаю, проблема в том, что jquery не видит того, что сформировалось динамически (хотя первую строчку списка выводит нормально).

Вот так вывожу данные из нескольких полей повторителей ACF

<select id="material" name="material">
<?php if( have_rows('materials_general') ): ?>

  <?php while( have_rows('materials_general') ): the_row(); 
    $materials_name = get_sub_field('materials_name');?>    
    <option value="<?php echo $materials_name; ?>"><?php echo $materials_name; ?></option>                  
  <?php endwhile; ?>
<?php endif; ?>
</select>
<select id="color" name="color">
<?php if( have_rows('materials_general') ): ?>
  <?php while( have_rows('materials_general') ): the_row(); 
    $materials_name = get_sub_field('materials_name');?>    
   <?php if( have_rows('color_materials') ): ?>
  <?php while( have_rows('color_materials') ): the_row();
  $color_name = get_sub_field('color_name');?>
  <option value="<?php echo $color_name; ?>" data-chained="<?php echo $materials_name; ?>"><?php echo $color_name; ?></option>
  <?php endwhile; ?>
<?php endif; ?>                 
<?php endwhile; ?>
<?php endif; ?>
</select>
<select id="printing" name="printing">
<?php if( have_rows('materials_general') ): ?>
  <?php while( have_rows('materials_general') ): the_row(); 
    $materials_name = get_sub_field('materials_name');?>    
   <?php if( have_rows('printing_materials') ): ?>

  <?php while( have_rows('printing_materials') ): the_row();
  $printing_name = get_sub_field('printing_name');
  $printing_cost = get_sub_field('printing_cost');
  ?>
      <option value="<?php echo $printing_cost; ?>" data-chained="<?php echo $materials_name; ?>"><?php echo $printing_name; ?></option>
  <?php endwhile; ?>
<?php endif; ?>             
  <?php endwhile; ?>
<?php endif; ?>
</select>

Вот код, который, по идее, должен производить сортировку и скрытие ненужного в данный момент.

<script>
  jQuery(function ($) {
    $(function () {
    $("#color").chainedTo("#material");
    $("#printing").chainedTo("#material");
    });});  
</script>

Хотя, что самое интересное, если список не динамически созданный, то все работает

<select id="material" name="material">
    <option value="CAMBRIC-PROVENCE">CAMBRIC-PROVENCE</option>
    <option value="Cervo">Cervo</option>
</select>
<select id="color" name="color">
    <option value="s3" data-chained="CAMBRIC-PROVENCE">Красный</option>
    <option value="s5" data-chained="CAMBRIC-PROVENCE">Зеленый</option>
    <option value="series-6" data-chained="CAMBRIC-PROVENCE">Черный</option>
    <option value="a3" data-chained="Cervo">Голубой</option>
    <option value="a4" data-chained="Cervo">Розовый</option>
    <option value="a5" data-chained="Cervo">Золотой</option>
</select>
<select id="printing" name="printing">
    <option value="190" data-chained="CAMBRIC-PROVENCE">от 1 до 300</option>
    <option value="150" data-chained="CAMBRIC-PROVENCE">от 301 до 5000</option>
    <option value="190" data-chained="Cervo">от 1 до 300</option>
    <option value="150" data-chained="Cervo">от 301 до 5000</option>
</select>

Подскажите, пожалуйста, как заставить динамически созданные списки работать?Всю голову уже сломал...


Ответы (0 шт):