2017-02-17 69 views
0

我通過Ajax載入站,每個崗位都有一個Flexslider(2)旋轉木馬,這是不加載後觸發Flexslider。我相信這可能與該職位的時間做的事情 - 在Flexslider腳本後加載之前運行,所以它不會被觸發。我試過一個回調函數,並將Flexslider綁定到成功調用,但無法使其工作。有沒有一種理想的方式來做到這一點?WordPress的AJAX後負荷

(Flexslider運行Ajax內容之外的頁面上的罰款。)

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

     $(".events_link").click(function() { 
      var eventname = $(this).attr('id'); 
      var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"; 
      jQuery.ajax({ 
       type: 'POST', 
       url: ajaxurl, 
       data: { 
        action: "all_event", 
        eventname: eventname 
       }, 
       success: function (response) { 
        $(".events-thumbs").html(response); 
       } 
      }); 

     }); 

     $('.flexslider').flexslider({ 
      animation: "slide", 
      slideshow: "false", 
      animationLoop: true, 
      itemWidth: 192, 
      itemMargin: 9, 
      controlNav: true, 
      directionNav: false 
     }); 

    }); 

添加flexslider到工作的成功回調!

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

     $(".events_link").click(function() { 
      var eventname = $(this).attr('id'); 
      var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"; 
      jQuery.ajax({ 
       type: 'POST', 
       url: ajaxurl, 
       data: { 
        action: "all_event", 
        eventname: eventname 
       }, 
       success: function (response) { 
        $(".events-thumbs").html(response); 
        $('.flexslider').flexslider({ 
         animation: "slide", 
         slideshow: "false", 
         animationLoop: true, 
         itemWidth: 192, 
         itemMargin: 9, 
         controlNav: true, 
         directionNav: false 
        }); 
       } 
      }); 

     }); 

    }); 
+1

你有沒有試着撥打flexslider功能在你的Ajax成功功能?也許你可以在將html附加到'.event-thumbs'後調用它。 – Huelfe

+0

你不應該把JavaScript放入php中。把它放在一個文件中,你會正確入球。你可以看到的例子[這裏](http://stackoverflow.com/questions/31587210/load-more-posts-ajax-button-in-wordpress/31588401#31588401) –

+0

@Huelfe我沒有嘗試,並且它有沒有效果;我已經更新在代碼後我嘗試 – jamie

回答

1

的解決方案是在flexslider功能添加到成功的Ajax調用另一個功能:

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

    $(".events_link").click(function() { 
     var eventname = $(this).attr('id'); 
     var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"; 
     jQuery.ajax({ 
      type: 'POST', 
      url: ajaxurl, 
      data: { 
       action: "all_event", 
       eventname: eventname 
      }, 
      success: function (response) { 
       $(".events-thumbs").html(response); 
       $('.flexslider').flexslider({ 
        animation: "slide", 
        slideshow: "false", 
        animationLoop: true, 
        itemWidth: 192, 
        itemMargin: 9, 
        controlNav: true, 
        directionNav: false 
       }); 
      } 
     }); 

    }); 

});