jQuery - 有人可以帮助使用 .ajaxComplete() 拼接 jQuery 代码吗？答案

【问题标题】：jQuery - Can someone help stitching jQuery code with .ajaxComplete()?jQuery - 有人可以帮助使用 .ajaxComplete() 拼接 jQuery 代码吗？
【发布时间】：2010-04-30 09:12:00
【问题描述】：

所以我有这个内容加载器，它用来自单独页面的内容替换 div 中的内容。但是到达的内容包含一个使用 jQuery 的菜单，这是行不通的。有人告诉我我需要重新初始化代码。但是我该怎么做呢？我已经查看了 .ajaxComplete()，但我真的不明白我应该如何将它与现有代码拼接在一起？

$('.dynload').live('click',
 function(){

 var toLoad = $(this).attr('href')+' #content';
 $('#content').fadeOut('fast',loadContent);
 $('#ajaxloader').fadeIn('normal'); 
 function loadContent() {
     $('#content').load(toLoad,'',showNewContent())
 }
 function showNewContent() {
    $('#content').fadeIn('fast',hideLoader());
    //Cufon.replace('h1, h2, h3, h4, .menuwrapper', { fontFamily: 
'advent'}); 
 }
 function hideLoader() {
     $('#ajaxloader').fadeOut('normal');
 }

 return false;

 });

这是我用于 jQuery 菜单的代码：

    $().ready(function() {
                $('#kontrollpanel .slidepanels').kwicks({
                min : 42,
                spacing : 3,
                isVertical : true,
                sticky : true,
                event : 'click'
            });                    
    });

另外，请注意我是如何尝试在第一个函数中调用 Cufon 的？这也不起作用，也可以重新初始化吗？非常感谢任何帮助..

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

您可以将所有当前代码更改为：

$(function() {
  $('.dynload').live('click', function(){
    $('#ajaxloader').fadeIn('normal');
    var href = this.href + ' #content';
    $('#content').fadeOut('fast',function() {
      $(this).load(href,'', function(data) {
        createMenus();
        $('#ajaxloader').fadeOut('normal');
        $('#content').fadeIn('fast');
        Cufon.replace('h1, h2, h3, h4, .menuwrapper', { fontFamily: 'advent'});
      });
    }); 
    return false;
  });
});
$(createMenus);

function createMenus() {
  $('#kontrollpanel .slidepanels').kwicks({
     min : 42,
     spacing : 3,
     isVertical : true,
     sticky : true,
     event : 'click'
  });                    
}

目前您在这里遇到了一些问题：

$('#content').load(toLoad,'',showNewContent())
//and...
$('#content').fadeIn('fast',hideLoader());

在上面的内容中，一旦内容进入，我就会淡出 ajax 加载器，但在 showNewContent 和 hideLoader 以及 () 中，这也可能导致您的 Cufron 错误）。我还把你的菜单创建变成了一个函数，这样它就可以通过传递一个内容来重复使用。当您执行$(selector) 时，您实际上 所做的是$(selector, document)，document 是默认上下文（更新：查看您的实际页面，上面的简化并不重要） .

你可以传递任何你想要的上下文，所以在你的load回调中，我们现在使用data作为刚刚加载的内容的上下文，所以它只在你加载的内容中寻找元素在...上创建菜单...不要弄乱现有菜单。

【讨论】：

在我有机会尝试解决方案之前，我会继续将此设置为答案。我相信这将解决我的大部分问题 :) 非常感谢！我现在会开始更多地理解这一点。将通过代码并尝试查看到底发生了什么，以确保我真正理解:)
@Kenny - 如果您还有其他问题，请在此处提问。您的代码取决于插件和内容，因此我无法彻底测试，只需发布您遇到的任何问题，我会尽力提供帮助.
好的，最初我发现它不起作用。意思是，内容淡出，但新内容不会淡入。您可以在此处实际看到它：www.matkalenderen.no 只需单击中间的蓝色超链接，您就会看到会发生什么。
@Kenny - 我的错，我在最后打包你的代码时从错误的地方拉了href，试试更新的答案。
是的，它现在可以工作了 :) Atleast Cufon 正在工作。幻灯片菜单不是。你可以在这里试试：www.matkalenderen.no/index.php。（不要介意 php 错误）顶部有一个菜单，上面写着“Kontrollpanel”，它链接到 kontrollpanel.php，您也可以手动访问它。如果您手动访问它，您将看到中间菜单的行为方式。

【解决方案2】：

在你的 showNewContent() 函数中调用这个：

       $('#kontrollpanel .slidepanels').kwicks({
            min : 42,
            spacing : 3,
            isVertical : true,
            sticky : true,
            event : 'click'

【讨论】：