.trigger函数的回调

I have the following code:

 $("#scheduleLink").trigger("click");
 alert("text")

This is the click handler:

$("#scheduleLink").bind("click", (function () {
            loadScheduleEvent();
            $(".wrap_tabs").find("a").removeClass("active"); 
            $(this).addClass("active");
        }));

and loadScheduleEvent function:

function loadScheduleEvent() {
        var eventId = $(".movie").attr("eventId");
        var type = $(".movie").attr("type");
        $("#publicationBlockContent").load("/Publication/EventSchedule?eventId=" + eventId + "&type=" + type);
    }  

I suppose that this code work async. I want that alert("text") calls only when loadScheduleEvent is finished. How can I do this?

Thanks.

UPDATE: In fact, instead of alert("text") there is some code. And, I can't move this code to callback of $.load function.

Use the .load Callback

$("#publicationBlockContent")
    .load("/Publication/EventSchedule?eventId=" + eventId + "&type=" + type,
          function(){alert("text");}
    );

rtm http://api.jquery.com/load/ for additional callback parameters etc.

$("#publicationBlockContent").load"/Publication/EventSchedule?eventId=" + eventId + "&type=" + type,    
function (responseText, textStatus, XMLHttpRequest) {     
if (textStatus == "success") {          
alert("success")
}
 if (textStatus == "error") {
      alert("failed")
 }
} 

If you don't want move that code replaced by alert alternatively all you can do is fire one event which triggers your behavior replaced by alert.

$("#scheduleLink").bind("click", (function () {
        loadScheduleEvent();
        $(".wrap_tabs").find("a").removeClass("active"); 
        $(this).addClass("active");
    }));



$(window).bind("scheduleComplete", (function (event,params) {
      alert(params);
    }));

Now in loadScheduleEvent you have to trigger it.

 function loadScheduleEvent() {
    var eventId = $(".movie").attr("eventId");
    var type = $(".movie").attr("type");
    $("#publicationBlockContent").load("/Publication/EventSchedule?eventId=" + eventId + "&type=" + type,function(){$(window).trigger("scheduleComplete");});
}

And at last when you what this sequence execute you have to trigger only click event

$("#scheduleLink").trigger("click");

Also if you dont want scheduleComplete event to be exposed for window you can bind it with your scheduleLink also and get that behavior scoped and specific!!!...

Looks like there are 3 solutions:

1 - Create a function, and invoke it from a callback on .load

function loadComplete() {
    alert("text");
}

$("#scheduleLink")
.on("click", function () {

    $("#publicationBlockContent")
    .load("/my-url", function () {
        loadComplete();
    });

})
.trigger("click");

2 - Bind a custom event to $("#scheduleLink") called "loadComplete", and trigger it from a callback on .load

$("#scheduleLink")
.on("loadComplete", function () {
    alert("text");
})
.on("click", function () {

    $("#publicationBlockContent")
    .load("/my-url", function () {
        $("#scheduleLink").trigger("loadComplete");
    });

})
.trigger("click");

3 - If you don't need a .load, you can use the promise object supported by $.ajax, $.get and $.post

$("#scheduleLink")
.on("click", function () {

    return $.get("/my-url", function () {
        $("#scheduleLink").trigger("loadComplete");
    });

})
.trigger("click");

var promise = $("#scheduleLink").triggerHandler("click");
promise && promise.done(function () {
    alert("click");
});