title: jQuery - creating dynamic tables
body: <p>The following code works, in so much that it creates the table and appends the rows.  </p>
  
  <p>However, I've attached a click event to the dynamically created button that resides in <code>&lt;tfoot&gt;</code> and it doesn't work.  It doesn't seem to call the <code>createNewIssue</code> function and it doesn't generate any Firebug errors.  I altered it to just throw up a simple alert, but that doesn't work either.</p>
  
  <p>I'm pretty new to jquery, so if there's a better way to do this, then great, but hoping someone will at least be able to help me understand why my tfoot button isn't working... </p>
  
  <p>First... </p>
  
  <pre><code>$(document).ready(function() {
    //add-section works
    $('#add-section').click(function() {
      createNewSection();
    });
  
    //this does not work      
    $('input[id^=add-issue-]').click(function() {
      alert($(this).attr('id')); //put this in and it fails
  
          //this is what I really want it to do:
          var issueid = $(this).attr('id');
          createNewIssue(issueid);
    });
  
  });
  </code></pre>
  
  <p>This is the <code>createNewSection</code> function, which works:</p>
  
  <pre><code>function createNewSection() {
      var sectioncount = $('input.section-title').length;
      var issuecount = $('input.issue-title').length;
      var newsection = $('input#add-section-textfield').val();
  
      //Add section entry to table
      var sinput = document.createElement("input");
      sinput.setAttribute("type", "text");
      sinput.setAttribute("name", "section["+sectioncount+"][title]");
      sinput.setAttribute("id", "section-"+sectioncount+"-title");
      sinput.setAttribute("value", newsection);
  
      //Issue title input
      //Add section entry to table
      var iinput = document.createElement("input");
      iinput.setAttribute("type", "text");
      iinput.setAttribute("name", "add_issue_"+sectioncount);
      iinput.setAttribute("id", "add-issue-"+sectioncount);
      iinput.setAttribute("value", "");
  
      //Button to add issue entry to table
      var issuebutton = document.createElement("input");
      issuebutton.setAttribute("type", "button");
      issuebutton.setAttribute("name", "add_issue_"+sectioncount);
      issuebutton.setAttribute("id", "add-issue-"+sectioncount);
      issuebutton.setAttribute("value", "Add Issue");
  
      var sTable = $('&lt;table&gt;').attr('id', 'section-'+sectioncount).appendTo('#sections');
      var sTbody = $('&lt;tbody&gt;').appendTo(sTable);
      var sTrow = $('&lt;tr&gt;').appendTo(sTbody);
      var sTcell = $('&lt;td&gt;').attr('colspan', 2).html(sinput).appendTo(sTrow);
      var sTfoot = $('&lt;tfoot&gt;').appendTo(sTable);
      var sTfootRow = $('&lt;tr&gt;').appendTo(sTfoot);
      var sTfootCell = $('&lt;td&gt;').html(iinput).appendTo(sTfootRow);
      var sTfootCell2 = $('&lt;td&gt;').html(issuebutton).appendTo(sTfootRow);
  }
  </code></pre>
  
  <p>Eventually, I'm trying to get the createNewIssue function to add a row (containing a nested table) to <code>&lt;table id="section-...&gt;</code>, but for now, I'm just trying to get it to throw an alert with the id of the parent table... </p>
  
  <pre><code>function createNewIssue(issueid) {
      var sTable = $(id).parent().parent().attr('id');
      alert(sTable);
  }
  </code></pre>