.live() or .livequery()

Question

I have a site that is Ajaxed, content that is Ajax is from other pages, such as about.html, contact.html. The ajax is getting the content from a div called #main-content. But after the ajax call, rest of my scripts break. Such as the tinyscrollbar() plugin and some other custom functions.

I searched for about 4 days and found out that my problem was the AJAX request changing the DOM, and since scripts being loaded before that, it doesn't run after the ajax call.

If i'm right, what would I need to fix this? .live() or the .livequery() plugin?

All the JS I am using is in this:

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

For plugins, neither really. You can simply re-init your plugins within $.load's complete callback:

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

For event handlers, you can rebind them within the callback as in the above example, or use .live or .delegate (which you already seem to be using) to ensure that the binding persists for future (ajax-replaced) elements, e.g.:

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

or:

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