jQuery - creating dynamic tables

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

There is never a need to use `.attr()` to get an element's ID. Always use `this.id` instead of `$(this).attr('id')`. http://stackoverflow.com/questions/4651923/when-to-use-vanilla-javascript-vs-jquery — Matt Ball, Oct 09 '11 at 03:03

Brad Christie · Accepted Answer · 2013-01-28T17:54:05.620

3

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

edited Jan 28 '13 at 17:54

answered Oct 09 '11 at 03:04

Brad Christie

100,477
16
156
200

Yup. Or .delegate(), which has benefits over .live(). – Greg Pettit Oct 09 '11 at 04:18
Thanks for this, but when I use live, it throws up the alert box as soon as the markup is appended instead of waiting for a click event... Is there something I can do to prevent that from happening? – Scooter5150 Oct 09 '11 at 05:30
@Scooter5150: Does your `#add-section` element, by chance, _also_ follow the `input[id^=add-issue-]` selector used in the live event? – Brad Christie Oct 09 '11 at 13:30
both .live() and delegate() are depreciated! – FidEliO Jan 28 '13 at 17:46
@FidEliO: they weren't back in 2011 when I wrote this, but thanks for the comment. I'll add an update to reflect new version(s). – Brad Christie Jan 28 '13 at 17:48

score 0 · Answer 2 · answered Oct 09 '11 at 03:06

Try changing

$('input[id^=add-issue-]').click(function() { ... });

to

$('input[id^=add-issue-]').live("click",function() { ... });

If it's a race condition (e.g, JavaScript is trying to assign the click handler before the createNewSection() function has finished) this will solve it. The live event handler not only captures the matching selectors at run time, but also any new ones added afterwards (say, via JS).

jQuery - creating dynamic tables

2 Answers2

Update