ajax加载后调用函数？

Question

我有一个 ajax 函数，当我点击它时会触发它。

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".post-link").click(function(){
        var post_link = $(this).attr("href");
        $("#main-content").fadeIn(500);
        $("#single-post-container").html('<img src="image.png">');
        $("#single-post-container").load(post_link);
                        return false;
    });          
});

但是在我触发它之后，我想调用一个新函数。 jQuery 中用于幻灯片放映的函数。我谷歌了很多，我看到如果你把新功能放在 ajax 的“成功：”部分它会起作用。但我的没有成功部分？我明白如果我让你发笑，我就是业余爱好者！哈哈。但是，如果您需要更多信息，请告诉我。

谢谢！

（我要添加的功能是这样的：）

$(function(){


var width = 600;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;


var $slider = $("#slider");
var $slideContainer = $(".slides");
var $slides = $(".slide");
var $toggleRight = $("#right");
var $toggleLeft = $("#left");


$toggleRight.click(function(){
    $slideContainer.animate({'margin-left': '-='+width}, animationSpeed,     function(){
        currentSlide++;
        if (currentSlide === $slides.length) {
            currentSlide = 1;
            $slideContainer.css('margin-left', 0);
        }
    });
});

$toggleLeft.click(function(){
    if (currentSlide === 1) {
        currentSlide = $slides.length;
        $slideContainer.css({'margin-left': '-'+width*($slides.length-1)+'px'});
        $slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() {
            currentSlide--;
        });
    } else {
        $slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function(){
            currentSlide--;
        });
    }
});




});

Answer 1

您可以在 .load 的 callback function 中调用您的新函数。例如：

$("#single-post-container").load(post_link,function(){
    //Call new function here
});

回调函数

如果提供了“完成”回调，它会在之后执行 已执行后处理和HTML 插入。回调 为jQuery 集合中的每个元素触发一次，这是 依次设置为每个DOM 元素。

您还可以使用callback function 中的status 参数检查负载是success 还是failed，如下所示：

$("#single-post-container").load(post_link,function( response, status, xhr ) {
  if (status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
  else
  {
     //Call new function
  }
});

Answer 2

如documentation 中所述：“当检测到成功响应时（即当 textStatus 为“成功”或“未修改”时）”

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".post-link").click(function(){
        var post_link = $(this).attr("href");
        $("#main-content").fadeIn(500);
        $("#single-post-container").html('<img src="image.png">');
        $("#single-post-container").load(post_link, 
         function (responseText, textStatus, XMLHttpRequest) {
            if (textStatus == "success") {
              // all good!
            }
            if (textStatus == "error") {
              // oh noes!
            });
                            return false;
         });          
 });

Answer 3

问题是加载是异步的。该函数调用在 AJAX 请求完成之前返回。如果有代码需要在请求完成后执行，则需要使用完成/成功回调。

More Info

你可以这样做。

$(document).ready(function(){

$.ajaxSetup({cache:false});
$(".post-link").click(function(){
    var post_link = $(this).attr("href");
    $("#main-content").fadeIn(500);
    $("#single-post-container").html('<img src="image.png">');
    $("#single-post-container").load(post_link, function( response, status, xhr ) {
   if(status=="success"){

     var width = 600;
     var animationSpeed = 1000;
     var pause = 3000;
     var currentSlide = 1;


     var $slider = $("#slider");
     var $slideContainer = $(".slides");
     var $slides = $(".slide");
     var $toggleRight = $("#right");
     var $toggleLeft = $("#left");


    $toggleRight.click(function(){
    $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
    currentSlide++;
    if (currentSlide === $slides.length) {
        currentSlide = 1;
        $slideContainer.css('margin-left', 0);
    }
});
});

   $toggleLeft.click(function(){
if (currentSlide === 1) {
    currentSlide = $slides.length;
    $slideContainer.css({'margin-left': '-'+width*($slides.length-1)+'px'});
    $slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() {
        currentSlide--;
    });
} else {
    $slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function(){
        currentSlide--;
    });
        }
     });

     }
      if ( status == "error" ) {
        var msg = "Sorry but there was an error: ";
        $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
      }
                    return false;
   });          
});