我正在使用wordpress网站。我在页面上显示网站的事件，并且我点击了更多加载按钮，点击更多可用事件通过ajax在页面上显示。单击事件时，将显示Bootstrap模式，显示事件的详细信息。在页面加载其模态时加载的那些事件正在加载正常。当我通过ajax获取事件时，他们的模态不会打开。我不知道为什么我试图通过jquery On函数获得模态但是没有用。 这是我的代码。
通过ajax调用事件的Javascript代码
<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' );
任何帮助??
答案 0 :(得分：0)
尝试从die()函数的末尾删除example_ajax_request()。
答案 1 :(得分：0)
感谢我获得解决方案的评论只需在ajax函数中调用模态弹出窗口并且它可以工作：）