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'). stackoverflow.com/questions/4651923/… — Matt Ball
– Matt Ball, Commented Oct 9, 2011 at 3:03

Brad Christie · Accepted Answer · 2013-01-28 17:54:05Z

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, 2013 at 17:54

answered Oct 9, 2011 at 3:04

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Greg Pettit Over a year ago

Yup. Or .delegate(), which has benefits over .live().

Scooter5150 Over a year ago

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?

Brad Christie Over a year ago

@Scooter5150: Does your #add-section element, by chance, also follow the input[id^=add-issue-] selector used in the live event?

FidEliO Over a year ago

both .live() and delegate() are depreciated!

Brad Christie Over a year ago

@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).

Bradley Staples · Accepted Answer · 2011-10-09 03:06:24Z

0

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).

answered Oct 9, 2011 at 3:06

Bradley Staples

3671 silver badge8 bronze badges

Collectives™ on Stack Overflow

jQuery - creating dynamic tables

2 Answers 2

Update

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related