javascript - 在 ajax 加载部分中不工作 jquery

标签 javascript php jquery ajax wordpress

我用ajax加载了一些页面 Ajaxtabs我在页面中使用了 jquery 和 owl 轮播,但加载部件后,jquery 不起作用并且没有 owl div 的类和样式。

我的主页:

<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中的第一个选项卡中时,浏览器中的第一个 View 不是ajax,可以正常工作,但是当我在选项卡之间切换并加载其他部分并返回到第一个选项卡时,这也不起作用。

最佳答案

检查您正在调用最新的 jQuery

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

关于javascript - 在 ajax 加载部分中不工作 jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38673241/

相关文章:

Javascript fillRect 不从变量中绘制

javascript - 基于 Express 和 Mongoose 的 REST API - 在将对象返回给用户之前过滤掉对象的某些属性

javascript - CYPRESS - 查找并生成包含一些文本的表行

javascript - 使用javascript根据另一个表中的行数更改表宽

jquery - 如果调整图像大小,Jcrop 会出现问题 - Jquery

javascript - 禁用用户选择在 Firefox 中不能正常工作

php - Atom PHP lint 无法在 Windows 10 上运行

php - 我如何防止在 PHP 中重复提交表单(跨多个窗口进行保护)?

php 插入 mysql 后置变量函数

javascript - 如何将 ng-model 值捕获到可排序选项中 [ui-sortable]