JavaScript function breaking my deep link in jQuery Address crawling

Strange behavior of JavaScript with jQuery Address (plugin).

I have this code:

var handler = function(data) {
$('#conteudo').hide().html($('#conteudo', data).html()).fadeIn(500);
$.address.title(/>([^<]*)<\/title/.exec(data)[1]);
};

And it works. Perfectly.

Now I change the code:

var handler = function(data) {
$('#conteudo').fadeOut(500, function() {
    $('#conteudo').html($('#conteudo', data).html()).fadeIn(500);
});
$.address.title(/>([^<]*)<\/title/.exec(data)[1]);
};

Now the fade out effect works, and after fade in (with new content). Beautiful! But this little change in the way of writing the new content (inside of the new function, after fadeOut) broke my sub-links inside my pages.

Here's a live example:

1. Acce开发者_如何学Pythonss this URL: http://impulse.im/clean/2/
2. In the top menu, click on 'Contato'.
3. Now look the href of link 'Rafa' in the loaded content!

   http://impulse.im/clean/2?_escaped_fragment_=%2Fcontato%2Frafa.

   This is not correct: it should read

   http://impulse.im/clean/2/#!/contato/rafa

4. Again: http://impulse.im/clean/2/ - Click on 'Contato'. Now RELOAD the page.
5. The link 'Rafa' is now correct.

What this new function (after fadeOut) is doing with the code? Why this function is breaking my link?

Thanks!

The problem is that you are calling the address plugin before the html stored in data is actually placed on the page. It happens because you call the $('#conteudo').html($('#conteudo', data).html()).fadeIn(500) asynchronously as it's called as a callback to the fadeOut method.

Change it this way:

var handler = function(data) {
    $('#conteudo').fadeOut(500, function() {
        $('#conteudo').html($('#conteudo', data).html()).fadeIn(500);
        $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
    });
};

This will call your address plugin after the new content was placed in the page.

Before it worked like this.

handler returns data -> content fades out -> you call the address plugin but the content isn't placed on the page yet -> after 500ms you the callback adding the content is called.

Now it'll be like this.

handler returns data -> content fades out -> after 500ms the content is added and the address plugin is called