Question

我是AJAX和JavaScript的新手，不知道如何让它发挥作用。

这是网站：

单击组合图像时，将通过AJAX加载详细信息。我希望能够为具有多个全尺寸图像的作品进行幻灯片放映。但是，因为内容是使用AJAX加载的，所以Flexslider的JavaScript不起作用。

以下是加载内容的代码：

// ----------- PROJECT WINDOW SHOW/HIDE ----------- //

    var $actual= null;

    $(".ch-grid").click(function() {
            $.scrollTo( $('#project-show'), 800, {offset:-130});
            obre($(this).attr('id'));
            $actual=$(this);
//          alert($('.project-content').position().top)
//          $('html, body').animate({scrollTop:($('.project-content').position().top)+165}, 1000);
    });

    $(".portfolio-btn").click(function() {
            obert=false;
    });

    function obre(quin){
    $.ajax({

        //type: "POST",
        //data: { id: $(this).attr('cid')},
        url: quin,
        success: function(data) {
            $('.project-content').html(data);
        }
    });
}

以下是需要加载的脚本：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=1.9.1"></script>
<script type="text/javascript" src="http://www.4ndesign.com/wp-content/themes/4ndesign/js/metronomy-plugins.js?ver=2.0"></script>
<script type="text/javascript" src="http://www.4ndesign.com/wp-content/themes/4ndesign/js/metronomy-custom.js?ver=2.2"></script>

Answer 1

在通过ajax加载内容后，您需要执行flexslider初始化。只需将其添加到ajax请求的success部分即可。

$.ajax({
  ..
  success: function(data) {
    $('#slider').flexslider(); // or what ever :)
  }
});

将JavaScript加载到AJAX加载的内容中

1 个答案: