jquery - creating dynamic tables...

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

Open in new window


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

Open in new window

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

Open in new window

n00b0101Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
replace :       $('input[id^=add-issue-]').click(function() {
by :       $('input[id^=add-issue-]').live("click",function() {

more info : http://api.jquery.com/live/

you should use distinct id for text and button, currently the id are the same
id must be unique in a document : http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
This attribute assigns a name to an element. This name must be unique in a document.

test page : http://jsfiddle.net/yFUyS/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
EyalCommented:
or you could change a little bit the 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);
      });
     });
    });
0
n00b0101Author Commented:
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?
0
leakim971PluritechnicianCommented:
>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?

you've a typo error somewhere
check again the test page : test page : http://jsfiddle.net/yFUyS/
there's no error when appening the markup

don't forget :
<<
you should use distinct id for text and button, currently the id are the same
id must be unique in a document : http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
This attribute assigns a name to an element. This name must be unique in a document.
>>


0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.