title: AJAX appended collapsible rows to a jQuery/javascript Tablesorter table lack needed attributes
body: <p>I'm trying to append rows upon scrolling of a table using a modified version of Tablesorter.js: <a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm" rel="nofollow noreferrer">http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm</a>. It is modified in the sense that it allows for collapsible rows. </p>
  
  <p>The problem I'm having is that upon scrolling and an AJAX call to load new rows, these new rows are lacking the attributes of the other rows that allow them to be toggleably collapsed/expanded. </p>
  
  <p>Here's some issues with the HTML for these appended rows:</p>
  
  <ol>
  <li>the clickable <code>&lt;a&gt;</code> tag class name isn't being toggled from "expanded" to "collapsible"</li>
  <li>the toggled <code>&lt;td&gt;</code> columns style attributes aren't  defaulting to <code>"display:none"</code> and don't toggle to <code>"display: table-cell"</code>.</li>
  </ol>
  
  <p>Here's the JS to trigger AJAX request upon scrolling and for Tablesorter. I've kept the HTML exactly as in the demo in the pengoworks.com link i mentioned above. </p>
  
  <pre><code>    $(function(){   
          $(document).endlessScroll({ 
              callback: function(i) { 
              loaded += 10;
                  $.post("/more/" + loaded, function(data){
                      $("#table"+ " tbody").append(data);
                      $("#table").trigger("update");
                  }); 
              } 
          }); 
  
          $("#table").collapsible("td.collapsible", {
                  collapse: true
              }).tablesorter({
              sortList: [[1,0]],      
              headers: {0: {sorter: false}}
              , widgets: ['zebra']
                  , onRenderHeader: function (){
                      this.wrapInner("&lt;span&gt;&lt;/span&gt;");
                  }
              });
    });
  </code></pre>
  
  <p><strong>UPDATE</strong> Please see the following jsfiddle which aims to get at AJAXifying the collapsible tablesorter table: 
  <a href="http://jsfiddle.net/Lcztc/8" rel="nofollow noreferrer">http://jsfiddle.net/Lcztc/8</a>. 
  It's not true AJAX but you get the idea. Also, here's a link to the collapsible.js code: <a href="http://www.pengoworks.com/workshop/jquery/tablesorter/jquery.tablesorter.collapsible.js" rel="nofollow noreferrer">http://www.pengoworks.com/workshop/jquery/tablesorter/jquery.tablesorter.collapsible.js</a>. According to Amar (see below), It is pretty clear I need to fix the parts of that plugin that relate to table element bindings such that they recognize appended elements.</p>
  
  <p>Unfortunately, the above jsfiddle still has 2 major issue with it: 1) the collapsibility of the original rows is lost every other time you click the "clickAJAX" button; 2) appended rows are never collapsible or expandable. Still some progress... </p>