Question

The following code works, in so much that it creates the table and appends the rows.

However, I’ve attached a click event to the dynamically created button that resides in <tfoot> and it doesn’t work. It doesn’t seem to call the createNewIssue 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.

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…

First…

$(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);
  });

});

This is the createNewSection function, which works:

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 = $('<table>').attr('id', 'section-'+sectioncount).appendTo('#sections');
    var sTbody = $('<tbody>').appendTo(sTable);
    var sTrow = $('<tr>').appendTo(sTbody);
    var sTcell = $('<td>').attr('colspan', 2).html(sinput).appendTo(sTrow);
    var sTfoot = $('<tfoot>').appendTo(sTable);
    var sTfootRow = $('<tr>').appendTo(sTfoot);
    var sTfootCell = $('<td>').html(iinput).appendTo(sTfootRow);
    var sTfootCell2 = $('<td>').html(issuebutton).appendTo(sTfootRow);
}

Eventually, I’m trying to get the createNewIssue function to add a row (containing a nested table) to <table id="section-...>, but for now, I’m just trying to get it to throw an alert with the id of the parent table…

function createNewIssue(issueid) {
    var sTable = $(id).parent().parent().attr('id');
    alert(sTable);
}

Answer 1

You probably want to use jQuery’s .live() event binding as the items are dynamically added to the DOM and won’t be attached to after the initial binding call. e.g.

$('input[id^=add-issue-]').live('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);
});

.live() tells jQuery to not only bind to elements already on the page, but keep an eye out for future elements matching your selector as well.

Update

As of jQuery v1.9, .live() is no longer available and has since been replaced with .on(). If you’re using jQuery >= 1.9, please use the following instead:

$(document).on('click', 'input[id^="add-issue-"]', function(e){
  alert($(this).attr('id'));

  var issueId = $(this).attr('id');
  createNewIssue(issueId);
});