.live () или .livequery ()

Question

У меня есть сайт, который является Ajaxed, контент, который является Ajax, с других страниц, таких как about.html, contact.html. Ajax получает содержимое от div с именем # main-content. Но после вызова ajax остальные сценарии ломаются. Например, плагин tinyscrollbar () и некоторые другие пользовательские функции.

Я искал около 4 дней и обнаружил, что моей проблемой является запрос AJAX, изменяющий DOM, и поскольку скрипты загружаются до этого, он не запускается после вызова ajax.

Если я прав, что мне нужно, чтобы это исправить? .live () или плагин .livequery ()?

Все JS, которые я использую, находятся в этом:

var $dd = $('.projects dl').find('dd'), $defBox = $('#def-box');

  $defBox.hide();
  $('.projects').hover(function(){
    $defBox.stop(true, true)
      .fadeToggle(1000)
      .html('<p>Hover The links to see a description</p>');
  });

  $dd.hide();
  $('.projects dl dt').hover(function(){
    var $data = $(this).next('dd').html();
    $defBox.html($data);
    }); 

  // Ajax Stuff 
  // Check for hash value in URL  
  var hash = window.location.hash.substr(1);

  //  Check to ensure that a link with href == hash is on the page  
  if ($('a[href="' + hash + '"]').length) {
    //  Load the page.
    var toLoad = hash + '.php #main-content';
    $('#main-content').load(toLoad);
  }

  $("nav ul li a").click(function(){
    var goingTo = $(this).attr('href');
    goingTo = goingTo.substring(goingTo.lastIndexOf('/') + 1);
    if (window.location.hash.substring(1) === goingTo) return false;

    var toLoad = $(this).attr('href')+' #main-content',
    $content = $('#main-content'), $loadimg = $('#load');

    $content.fadeOut('fast',loadContent);  
      $loadimg.remove();  
      $content.append('<span id="load"></span>');  
      $loadimg.fadeIn('slow');  
    window.location.hash = goingTo;

    function loadContent() {  
        $content.load(toLoad,'',showNewContent)  
    }  
    function showNewContent() {  
        $content.fadeIn('fast',hideLoader);  
    }  
    function hideLoader() {  
        $loadimg.fadeOut('fast');  
    }  
    return false;  

  });

Answer 1

Для плагинов, ни на самом деле.Вы можете просто повторно запустить ваши плагины в рамках полного обратного вызова $.load:

$('#main-content').load(toLoad, function() {
    $("#foo").tinyscrollbar();
    $("#bar").facebox();
    // etc
});

Для обработчиков событий вы можете привязать их в обратном вызове, как в примере выше, или использовать .live или .delegate (который вы, похоже, уже используете), чтобы гарантировать сохранение привязки для будущих (замененных ajax) элементов, например:

$('.projects dl').delegate("dt", "hover", function() {
   ...
}, function() {
    ...
});

или:

$('.projects dl dt').live("hover", function() {
   ...
}, function() {
    ...
});