Как накачать динамически сгенерированный мод начальной загрузки

Я работаю над сайтом WordPress. Я отображаю события веб-сайта на странице, и я добавил кнопку «Загрузить больше», нажав на нее. Доступные события отображаются на странице через ajax. При нажатии на события появляется модал Bootstrap, отображающий детали события. Те события, которые загружаются, пока страница загружает их модал, загружаются нормально. когда я получаю события через ajax, их модал не открывается. Я не знаю, почему я пытался получить модальные с помощью функции JQuery On, но это не сработало.
Вот мой код

Javascript код для вызова событий через ajax

<script type="text/javascript">

var ajaxURL = '<?php echo site_url(); ?>/wp-admin/admin-ajax.php';

var perpage = parseInt('<?php echo $perpage; ?>');

var offset  = 0;jQuery(document).ready(function($) {$(".load_more").click(function(){

offset += perpage;

// This does the ajax request

$.ajax({

type: 'POST',

url: ajaxURL,

data: {

'action':'example_ajax_request',

'offset' : offset,

'perpage' : perpage

},

success:function(data) {

$(".event-row").append(data);

$('.dynamic').click(function() {
$("#dynamic_modal").modal({
show: true
});
});if(data != '')

{

$("#offset").val(offset);

}
}
});
});
});

</script>

Вот мой код, где я создал динамический HTML для событий

function example_ajax_request() {

$returnStr = '';
$perpage = $_POST['perpage'];
$offset  = $_POST['offset'];
$args = array( 'post_type' => 'events', 'posts_per_page' => $perpage, 'offset' =>$offset, 'orderby' => 'asc' );
$loop = new WP_Query( $args );
$i=0;
while ( $loop->have_posts() ) : $loop->the_post();
$returnStr .= '<div class="menu-category list-group ">';
$returnStr .= '<div class="img-1"><a href="javascript:void(0)" class="dynamic" id="'.$loop->post->ID.'" data-modal="modal" data-target=".'.$loop->post->ID.'"><img src="'.wp_get_attachment_url( get_post_thumbnail_id($loop->post->ID, 'thumbnail') ).'" class="img-responsive"></a></div>';
$returnStr .= '<div class="img-1-text">';
$returnStr .= '<h1 class="event-heading-one">'.esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID).'</h1>';
$returnStr .= '<div class="date-time-event">';
$link = get_post_meta($loop->post->ID, 'eventdate', $single);
$timestamp = strtotime($link[$i]);
$date[$i] = date('M d, Y', $timestamp);
$returnStr .= '<div class="date">date :<span class="event-span">'.$date[$i].'</span></div>';
$time = get_post_meta($loop->post->ID, 'event_time', $single);
$returnStr .= '<div class="time">time :<span class="event-span">'.$time[$i].'</span></div>';
$location = get_post_meta($loop->post->ID, 'event_location', $single);
$number = get_post_meta($loop->post->ID, 'event_number', $single);
$website = get_post_meta($loop->post->ID, 'event_website', $single);
$returnStr .= '<div class="event-text">'. $location[$i].', '.$number[$i].'  '.$website[$i].'</div>';
$returnStr .= '</div>';
$returnStr .= '</div></div>';

$returnStr .= '<div class="dynamic_modal modal fade '.$loop->post->ID.'" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">';
$returnStr .= '<div class="modal-dialog modal-lg">';
$returnStr .= '<div class="modal-content">';
$returnStr .= '<section id="pop-up-modal-windows">';
$returnStr .= '<div class="container">';
$returnStr .= '<div class="row">';
$returnStr .= '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-9">';
$returnStr .= '<div class="row">';
$returnStr .= '<div class="pop-up-modal">';
$returnStr .= '<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">';
$returnStr .= '<div class="left-modal-pop-up">';
$returnStr .= '<div class="modal-image">';
$returnStr .= '<img src="'.wp_get_attachment_url( get_post_thumbnail_id($loop->post->ID, 'full') ) .'" class="img-responsive">';
$returnStr .= '</div>';
$returnStr .= '</div>';
$returnStr .= '<div class="row">';
$returnStr .= '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">';
$returnStr .= '<div class="abc">';
$returnStr .= '<div class="modal-pop-up-heading">';

$link = get_post_meta($loop->post->ID, 'eventdate', $single);
$timestamp = strtotime($link[$i]);
$day[$i] = date('d', $timestamp);
$month[$i] = date('M', $timestamp);

$returnStr .= '<div class="date-of-event-modal">'.$day[$i].'<br>'.$month[$i].'</div>';
$returnStr .= '<div class="name-of-event-inner">';
$returnStr .= '<div class="event-text">';
$returnStr .= '<div class="modal-new-heading">'.esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID).'';
$returnStr .= '<div class="event-of-date-text">';
$location= get_post_meta($loop->post->ID, 'event_location', $single);
$time = get_post_meta($loop->post->ID, 'event_time', $single);
$returnStr .= ''.$location[$i].'<br>Shows start at '.$time[$i].'';
$returnStr .= '</div></div></div></div></div>';
$returnStr .= '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">';
$returnStr .= '<div class="modal-pop-up-text">'.esc_attr($loop->post->post_content ? $loop->post->post_content : $loop->post->ID).'</div>';
$returnStr .= '</div></div></div></div>';
$returnStr .= '<div class="row"></div></div>';
$returnStr .= '<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">';
$returnStr .= '<div class="modal-pop-right">';
$returnStr .= '<div class="modal-pop-right-heading">event location</div>';
$returnStr .= '<div class="border-bottom"></div>';
$returnStr .= '<div class="map-event-location">';
//$link = get_post_meta($loop->post->ID, 'event_map', $single);
//$returnStr .= '<iframe width="253" height="176" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?q='. $link[$i]['address'].'&output=embed"></iframe>';
$returnStr .= '</div></div>';
$returnStr .= '</div></div>';
$returnStr .= '</div></div>';
//$returnStr .= '</div></div>';
$returnStr .= '</section>';$i++;
endwhile;
echo $returnStr;
die();
}

add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

Любая помощь??