Может ли кто-нибудь помочь сшить код jQuery с помощью .ajaxComplete ()?

Question

поэтому у меня есть этот загрузчик контента, который заменяет контент внутри 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 в первой функции? Это тоже на самом деле не работает, может ли это быть повторно инициализировано? Буду очень признателен за любую помощь ..

Answer 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 в качестве контекста, который является только что загруженным контентом, так что он просматривает только содержимое, загружаемое для элементов, в создавать меню ... не мешая существующим меню.

Answer 2

В вашей функции showNewContent () вызовите это:

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