在ajax加载后调用函数？

Question

I have an ajax function that triggers when I click it.

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

But AFTER I've triggered it, I would like to call a new function. A function for a slideshow in jQuery. I've google alot and I see that if you put new functions in the "success: " section in ajax it will work.. But mine does not have an success section? I understand if I make you laugh, I'm as amateur as it gets! Haha. But Please, if you need more info, let me know.

Thanks!

(The function I'm trying to add is this:)

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

The problem is that load is asynchronous. The function call returns before the AJAX request is complete. If you have code that needs to be executed after the request is complete, you need to use the complete/success callback.

More Info

you can do like this.

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