不工作的jquery我加载一些页面Ajax和Ajaxtabs我在页面的jQuery &猫头鹰旋转木马使用,但后负荷零件,jQuery的不工作,givenot owl类和样式的div。在AJAX加载部分
我的主页:
<div class="tabsbar">
<ul id="countrytabs" class="tabsheader container">
<li><a href="#" rel="#default" class="selected">first tab no ajax</a></li>
<li><a href="one.php" rel="countrycontainer">test tab ajax</a></li>
<li><a href="two.php" rel="countrycontainer">test tab ajax</a></li>
<li><a href="three.php" rel="countrycontainer">test tab ajax</a></li>
</ul>
</div>
<div id="countrydivcontainer" class="tabsbody">
<p>first tab content that no ajax</p>
</div>
one.php & two.php & three.php是我的wordpress的自定义页面的链接one.php
:
<?php /* Template Name: CustomPage1 */ ?>
<div class="products">
<?php
$args = array('post_type' => 'product', 'posts_per_page' => 10, 'product_cat' => 'print', 'orderby' => 'rand');
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post(); global $product; ?>
<div class="product item">
<a href="<?php echo get_permalink($loop->post->ID) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php woocommerce_show_product_sale_flash($post, $product); ?>
<?php if (has_post_thumbnail($loop->post->ID)) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="287px" height="227px" />'; ?>
<h3><?php the_title(); ?></h3>
<span class="price"><?php echo $product->get_price_html(); ?></span>
</a>
<?php woocommerce_template_loop_add_to_cart($loop->post, $product); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
<script type='text/javascript'>
$(document).ready(function(){
$('.products').owlCarousel({
loop:true,
responsiveClass:true,
responsive:{
0:{
items:2,
},
768:{
items:4,
},
992:{
items:6,
}
}
});
});
</script>
你看到我保存在页面中的10 woocommerce帖子,我想加载它作为Ajax,HTML代码加载好,但jQuery不工作在这个Ajax加载的部分。
另一个奇怪的问题,当我把旋转木马放在#countrydivcontainer第一个选项卡中,这是不正确的Ajax在浏览器中的第一个视图工作正常,但是当我切换标签之间并加载另一个部分,并返回到第一个选项卡,这也不工作。
尝试改变jQuery UI的标签和使用Load事件设置你的旋转木马! –