Question

我正在尝试在magnific弹出窗口中加载flexslider，但由于某种原因，弹出窗口内的脚本不起作用。

使用wordpress函数wp_enqueue_script()加载Magnific弹出窗口：

jQuery(document).ready(function($){

        $('.ajax-popup-link').magnificPopup({
            type:'ajax',
            midClick: true,
            overflowY: "scroll",
            alignTop: false,
        });
});

然后，通过按下按钮，弹出窗口将打开此文件：

<div class="container">

  <div class="popup-container">

    <?php
    // Loop start
    if( have_posts() ):

      while( have_posts() ) : the_post();

        get_template_part( 'agency', 'popup' );

      endwhile;

    else :

      echo "no agencies found";

    endif;
    ?>



  </div><!--.popup-container-->

</div> <!--.container -->

Inside agency-popup.php：

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

<script>

 jQuery(document).ready(function($) {   
    $(window).load(function() {
           $('.flexslider').flexslider({
              animation: "slide"
          });
     });
  });

</script>

但是jquery没有加载..我试图将它添加到按钮所在的页面内，并且在<head></head>部分内，在这两种情况下它都不起作用。注意：我已经使用wp_enqueue_script()加载了flexslider，并检查它是否已排队，并且确实已加入。

Answer 1

你应该在提升弹出窗口后启用flexslider：

$('.ajax-popup-link').magnificPopup({
    type:'ajax',
    midClick: true,
    overflowY: "scroll",
    alignTop: false,
    callbacks: {
        open: function() {
            $('.mfp-content .flexslider').flexslider({
                animation: "slide"
            });
        }
    }
});

说明：通过AJAX插入脚本不会运行它。但是，如指定in answers here，如果您使用jQuery dataType: html，那么它将被评估。

Answer 2

对于任何可能解决此问题的人，我都设法通过使用此回调来解决此问题：

callbacks: {            
    ajaxContentAdded: function() {
            $('#carousel').flexslider({
                animation: 'slide',
                direction: 'vertical',
                controlNav: false,
                animationLoop: true,
                slideshow: false,
                itemWidth: 143,
                itemMargin: 2,
                asNavFor: '#slider'
            });
            $('#slider').flexslider({
                animation: 'slide',
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                sync: '#carousel'
            });
        }
}

flexslider不能在ajax Magnific弹出窗口内工作

2 个答案: