Jquery document ready function, after load function

Question

I have loaded in a form via jQuery. As a consequence the $(document).ready(function() that was applied to it no longer functions. How do we reestablish the function to the form after it has loaded in.

Content is loaded in:

$('.section.com').load(window.location.href + ' .section.com .tubs')

This therefore no longer functions:

$('#commentform').ajaxForm(function () {
    $('.commentslogic').load('<?php the_permalink();?> .commentslogic .inner', function () {
        $('.commentlist li:first').hide();
        $('.commentlist li:first').slideDown(400);
        $('.commentlist li:first').effect('highlight', {}, 800);
        $('#cloader').slideUp(400);
    })
});

Answer 1

Put the form binding in a function so that you can reuse it:

function bindForm() {
  $('#commentform').ajaxForm(function() { 
    $('.commentslogic').load('<?php the_permalink();?> .commentslogic .inner', function(){
      $('.commentlist li:first').hide(); $('.commentlist li:first').slideDown(400); $('.commentlist li:first').effect('highlight', {}, 800); $('#cloader').slideUp(400);
    })
  });
}

Now you can call it both from the ready event, and as callback in the load method to bind the new form:

$('.section.com').load(window.location.href + ' .section.com .tubs', bindForm)