javascript - JavaScript 函数打破了我在 jQuery 地址抓取中的深层链接

Question

带有 jQ​​uery 地址（插件）的 JavaScript 的奇怪行为。

我有这个代码：

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

它有效。完美。

现在我更改代码：

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

现在淡出效果起作用，并且在淡入之后（使用新内容）。美丽的！但是编写新内容的方式（在新函数内部，fadeOut 之后）的这种小变化破坏了我页面内的子链接。

这是一个活生生的例子：

1. 访问此网址：http: //impulse.im/clean/2/
2. 在顶部菜单中，单击“Contato”。
3. 现在href在加载的内容中查看链接“Rafa”！
   http://impulse.im/clean/2?_escaped_fragment_=%2Fcontato%2Frafa.
   这是不正确的：它应该是
   http://impulse.im/clean/2/#!/contato/rafa
4. 再次： http: //impulse.im/clean/2/ - 点击“Contato”。现在重新加载页面。
5. 链接“Rafa”现在是正确的。

这个新函数（之后fadeOut）对代码做了什么？为什么这个功能会破坏我的链接？

谢谢！

Answer 1

问题是您在存储在数据中的html实际放置在页面上之前调用了地址插件。发生这种情况是因为您$('#conteudo').html($('#conteudo', data).html()).fadeIn(500)异步调用它，因为它被称为对 fadeOut 方法的回调。

以这种方式更改它：

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

将新内容放入页面后，这将调用您的地址插件。

在它像这样工作之前。

处理程序返回数据 -> 内容淡出 -> 您调用地址插件但内容尚未放置在页面上 -> 500 毫秒后，您将调用添加内容的回调。

现在它会是这样的。

处理程序返回数据 -> 内容淡出 -> 500ms 后添加内容并调用地址插件