fadeIn callback doesn't work from inside jquery.ajax success

Question

I get some data using AJAX, prepend element to body and then display it. After it's displayed I need to perform some client-side operations on a new element (say, I need to render Latex using codecogs' script ). My code looks like this:

$.ajax({
/* ... */
success: function(data){
    /* new element generation... */
    $(newelement).fadeIn(100, LatexIT.render('*'));
},
/* ... */ });

As you can see I call LatexIT.render('*') as a callback from fadeIn. It should perform whatever LatexIT.render('*') does right after the animation is over. But when called from $.ajax success the callback doesn't work, although fade itself occures normally.

UPDATE : I tried to replace LatexIT.render('*') with any simple function but it doesn't work. And fadeIn(100, function () { LatexIT.render('*') }); does work when called from outside of ajax success.

Answer 1

LatexID.render('*') is the syntax to call the .render method rather than bind it. Unless that itself returns a function, which is unlikely, you need to use this syntax:

.fadeIn(100, function () { LatexIT.render('*') });

You could also do:

.fadeIn(100, LatexIT.render.bind(undefined, '*'))

assuming the browsers you need to support have .bind

Answer 2

There you are not giving it a success callback, you are executing your render and giving what the render method returns to the complete argument of the fade animation, which is actually not a function that the animation can call at the end.

You should just wrap it into an anonymous function: $(newElement).fadeIn(100, function() { LatexIT.render("*"); })