jQuery - 有人可以帮助拼接jQuery代码与.ajaxComplete（）？ [英] jQuery - Can someone help stitching jQuery code with .ajaxComplete()?

问题描述

所以我有这个内容加载程序，用一个单独的页面中的内容替换div内的内容。但到达的内容包含使用jQuery的菜单，这不工作。有人告诉我，我需要重新初始化代码。但是我该怎么做呢？我已经调查了.ajaxComplete（），但我真的不知道我应该把它和我现有的代码一起拼凑吗？

so I've got this content loader that replaces content within a div with content from a separate page. But the content that arrives contains a menu that uses jQuery and this is not working. Someone told me I need to reinitialize the code. But how do I do that? I've looked into .ajaxComplete(), but I don't really get how I'm supposed to stitch that together with my existing code?

$('.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菜单的代码：

This is the code I'm using for the jQuery menu:

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

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

Also, notice how I try to call Cufon as well within the first function? That doesn't really work either, could that be reinitialized as well? Would really appreciate any help at all..

推荐答案

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

You can change all your current code to this:

$(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'
  });                    
}

目前您在这里有一些问题：

Currently you have some problems areas here:

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

在上面的例子中，一旦内容进入，我就淡出ajax加载器，在 showNewContent 和 hideLoader 中使用（）导致您的Cufron错误）。另外，我把你的菜单创建成一个函数，所以它可以通过传递一个内容重新使用。当你 $（selector）你实际上是做什么 $（selector，document），文档作为默认上下文（更新：查看您的实际页面，不需要这样简化上面的）。

In the above I'm fading out the ajax loader as soon as the content is coming in, but in showNewContent and hideLoader with the () this was likely causing your Cufron error as well). Also I turned your menu creation into a function so it can be re-used, by passing a content. When you do $(selector) what you're actually doing is $(selector, document), document being the default context (update: looking at your actual page, it doesn't matter so simplified the above).

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

You can pass any context you want, so in your load callback we're now using data as the context which is the content that was just loaded, so it's only looking inside the content your loading for elements to create menus on...not messing with existing menus.

这篇关于jQuery - 有人可以帮助拼接jQuery代码与.ajaxComplete（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！