jQuery .change doesn't fire when table gets new rows?

Question

I"m working on an asp.NET project. My code-behind page binds to a repeater control that fills a table on the page.

I've hidden the table with CSS while it's empty. I'd like to use jQuery to make the table visible when the repeater fills it, but I'm having trouble making that work. Here's a bare-bones example:

    $('#MyTable').change(function () {
        $('#MyTable').show();
    })

I'm using a plain HTML table, not an asp:Table, so I don't need to use the .ClientID workaround and I can't manipulate it on the server side. I've also tried putting the .change event on the repeater control, but that doesn't work either. The table stays hidden after the new rows are added.

Can anyone suggest a way, hopefully straightforward, do do what I'm trying to do?

Answer 1

The change event fires for combobox, listbox when selected index fired, i dont't think it will fire when you append tr to tables.

However, you can have work around for this, take a asp:panel or simply a div that will contain your html table, and you can set this panel visibility to true when you append rows in your html table.

Answer 2

If you use plain HTML table, change will not work, try this solution:

HTML table onChange

Answer 3

you can use the livequery plugin which will detect the DOM change.

first add the livequery plugin to the page and then try this

$('#MyTable tr') 
    .livequery(function(event) { 
       $('#MyTable').show();
        return false; 
    }); 

hope this helps.