Использование jquery для изменения миниатюр в модалах

Question

У меня есть цикл wordpress, который генерирует элементы портфолио. У каждого предмета портфолио есть модал.

 <div class="col-lg-8 col-md-12">
            <div class="row">
                <?php
                    $args = array(
                        'post_type' => 'portfoolio',
                        'posts_per_page' => 9
                    );
            $the_query = new WP_Query( $args ); ?>
            <?php if ( $the_query->have_posts() ) : ?>
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <?php 
                        $postid = get_the_ID(); 
                        $images = get_field('galerii', $postid);
                    ?>
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 mb-4 portfolio-item">
                        <div class="pdf-thumb-box">
                            <a data-toggle="modal" data-target="#Portfolio-<?php echo $postid; ?>">
                                <div class="pdf-thumb-box-overlay">
<!--                                     <span class="fa-stack fa-lg">
                                        <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
                                        <i class="fa fa-eye fa-stack-1x pdf-thumb-eye"></i>
                                    </span> -->
                                </div>
                                <img class="img-responsive portfolio-image" src="<?php the_field('avapilt'); ?>" alt="<?php the_title(); ?>">
                            </a>
                        </div>
                    </div>
                    <!-- Modal -->
                    <div class="modal fade modal-large" id="Portfolio-<?php echo $postid; ?>" tabindex="-1" role="dialog" aria-labelledby="Portfolio-<?php echo $postid; ?>" aria-hidden="true">
                      <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h3 class="modal-title" id="exampleModalLabel"><?php the_title(); ?></h3>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-md-6 portfolio-main-image">
                                        <img class="img-responsive portfolio-image" src="<?php the_field('avapilt', $postid); ?>" alt="<?php the_title(); ?>" id="portfolio-main">
                                    </div>
                                    <div class="col-md-6">
                                        <?php the_content(); ?>
                                    </div>
                                 </div>
                            </div>
                          </div>
                          <div class="modal-footer">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="row">
                                            <?php foreach( $images as $image ): ?>
                                                <div class="col-md-4">
                                                    <img class="portfolio-preview" src="<?php echo $image['sizes']['large']; ?>">
                                                </div>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          </div>
                        </div>
                       </div>
                      </div>  
                <?php endwhile; ?>
            <?php endif; ?>
                <?php wp_reset_postdata(); ?> 
            </div>
        </div>

В модальном нижнем колонтитуле есть галерея фотографий из портфолио. Когда я нажимаю на миниатюру галереи, картинка отображается в теле с большими размерами.

$('.portfolio-preview').on('click',  function() {
    $('#portfolio-main').prop('src', this.src);
    });

Но jquery работает только на первом модальном портфолио. Когда я открываю другой элемент портфолио, скрипт больше не работает. Есть идеи?

Answer 1

Работает ли следующее?

$(document).on('click', '.portfolio-preview', function() {
    $('#portfolio-main').prop('src', this.src);
});