2016-07-30 118 views
1

不工作的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在瀏覽器中的第一個視圖工作正常,但是當我切換標籤之間並加載另一個部分,並返回到第一個選項卡,這也不工作。

+0

嘗試改變jQuery UI的標籤和使用Load事件設置你的旋轉木馬! –

回答

0

檢查您所呼叫的jQuery最新

check also that you have added wp_head(); in header.php and wp_fooer(); in footer.php 
+0

我只是給了你,因爲你可能會忘記..沒有其他 – Shafi

+0

我叫jquery,我有其他滑塊&旋轉木馬&...和他們工作良好 –