Как запустить JavaScript после загрузки AJAX?

Question

Я использую вертикальное выпадающее меню или меню аккордеона, управляемое некоторыми js. Чтобы сохранить меню так, как оно есть, и не позволять ему переходить в исходное состояние при загрузке некоторого содержимого, я использую функцию загрузки. Это похоже на работу :-) Но фактический контент, слайдер изображения, также использует некоторые js, а при загрузке через функцию js не запускается, потому что весь сайт снова не работает. Как я могу повторно запустить js для этого контента?

Это функция нагрузки:

$(document).ready(function() { 
    $('ul#menu2 li ul li a').click(function() { 
     var page = $(this).attr('href'); 
     $('#content').load(page + '.php'); 
     return false; 
    }) 
;}); 

Это приставка для ползунка

$(document).ready(function() { 
    // Using default configuration 
    $('#carousel').carouFredSel(); 

    // Using custom configuration 
    $('#carousel').carouFredSel({ 

     items    : 1, 
     direction   : "left", 
     responsive   : false, 
     auto : { 
      play   : false 
     }, 
     scroll : { 
      items   : 1, 
      easing   : "swing", // "elastic", "swing" 
      duration  : 500,       
     }, 
     prev : { 
      button : "#p", 
      key  : "left" 
     }, 
     next : { 
      button : "#n", 
      key  : "right" 
     },    
    });}); 

В JS для ползунка называется jquery.carouFredSel-6.2.1.js. Я предполагаю, что это и подключение нужно перезапустить, чтобы заставить слайдер работать , когда загружался только контент, а не вся страница.

Может ли кто-нибудь помочь мне с этим?

Answer 1

Позвонить $ ('# carousel'). CarouFredSel(); от функции обратного вызова по запросу ajax. Что-то вроде этого.

$("#result").load("ajax/test.html", function() { 
    alert("Load was performed."); 
}); 

Answer 2

Они имеют раздел в их документации для вставки элементов в карусели после его инициализации:

http://docs.dev7studios.com/jquery-plugins/caroufredsel-advanced#insertitem

$(document).ready(function() { 
    $('ul#menu2 li ul li a').click(function() { 
     var page = $(this).attr('href'); 
     $('#content').load(page + '.php', function(){ 
      $('#carousel').carouFredSel({ 
       'insertItem' : $('#content') // Or whatever you need to add 
      }); 
     }); 
     return false; 
    }); 
}); 

Answer 3

Возможно

$(document).ready(function() { 
    $('ul#menu2 li ul li a').click(function(e) { 
     e.preventDefault(); // Prevents the browser from navigating to wherever the href was leading to 

     var page = $(this).attr('href'); 
     $('#content').load(page + '.php', function() { 
      // Loads Carousel only after #content has fully loaded 
      $('#carousel').carouFredSel({ 
       items    : 1, 
       direction   : "left", 
       responsive   : false, 
       auto : { 
        play   : false 
       }, 
       scroll : { 
        items   : 1, 
        easing   : "swing", // "elastic", "swing" 
        duration  : 500,       
       }, 
       prev : { 
        button : "#p", 
        key  : "left" 
       }, 
       next : { 
        button : "#n", 
        key  : "right" 
       },    
      }); 
     }); 

     return false; 
    }); 
});