Using table loaded as trigger

I want to change somethings in a table that I have in my page. The problem is that I have to call the function before the table is completed loaded (the table is loaded by an ajax event). How can I do that? I've tried so far this:

function hideActivePapers(){
    $('#paperTable').load(function(){                                         
        $('.active').each(function(){
            $(this).remove();
        });
    });     
}   

And this:

function hideActivePapers(){
    $('#paperTable').live('load',function(){                                         
        $('.active').each(function(){
            $(this).remove();
        });
    });     
}   

开发者_如何学JAVAThanks

You need to execute the post-load logic in the ajax callback function. Something like this:

function hideActivePapers()
{                                       
    $('.active').each(function()
    {
        $(this).remove();
    });
}  

$('#paperTable'.load('url/to/wherever', function ()
{
    // this code will be executed after the table loads
    hideActivePapers();
});

Alternately, it should be sufficient if you just execute your original hideActivePapers() function. Defining the function is not enough.

function hideActivePapers(){
    $('#paperTable').load(function(){                                         
        $('.active').each(function(){
            $(this).remove();
        });
    });     
}

// somewhere after document.ready,
hideActivePapers();

Why not use css to hide them so that they never display, and then when the table is completely loaded, do what the other answer said here, and use the callback to remove the active papers?

CSS:

#paperTable .active { display: none; }

JS:

$('#paperTable').load('url/to/wherever', function() {
  $('#paperTable .active').remove();
});