Question

I asked this question the other day and found out I should use .delegate() to get jquery to work after the ajax call, but I can’t figure out how to do it. Ajax just stops working altogether after I tried

So I tried:

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

and changed it to this:

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

and:

$('.projects dl').delegate($defBox, "hover", function() {
   .fadeIn(1000);
}, function() {
    fadeOut(1000);
});

Both still didn’t work. Anything i’m doing wrong?

Also this doesn’t work ether.

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

Answer 1

Hard to say without seeing your markup, but since you’re loading into main-container, I’m guessing you want this:

$('#main-container').delegate('.projects', 'hover', function(){
    // and so on

Now the hover events (mouseenter/mouseleave) will fire for .projects elements that are inside #main-container regardless of when they’re added.