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中幻灯片的功能。我已经谷歌很多了，如果你把新功能放在＆＃34;成功：＆＃34;在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
});

回调功能

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

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

$("#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

问题是加载是异步的。函数调用在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;
   });          
});

Answer 3

在documentation中提及：＆＃34;当检测到成功的响应时（即textStatus是＆＃34;成功＆＃34;或＆＃34;未修改＆＃34;）＆＃34;

$(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;
         });          
 });

ajax加载后调用函数？

3 个答案: