Let’s imagine a flight-booking application. The user is asked to supply the
names of all passengers traveling. Entered passengers appear as new rows
in a table, #passengersTable, with two columns: “Name” (containing a
text field for the passenger) and “Delete” (containing a button to remove
the passenger’s row).
To a d d a n e w p a s s e n g e r ( i. e. r o w ) , t h e u s e r c l i c k s a b u t t o n ,
#addPassenger:
1 $('#addPassenger').click(function() {(^2) var tr = document.createElement('tr');
(^3) var td1 = document.createElement('td');
(^4) var input = document.createElement('input');
(^5) input.type = 'text';
(^6) $(td1).append(input);
(^7) var td2 = document.createElement('td');
(^8) var button = document.createElement('button');
(^9) button.type = 'button';
(^10) $(button).text('delete');
(^11) $(td2).append(button);
(^12) $(tr).append(td1);
(^13) $(tr).append(td2);
(^14) $('#passengersTable tbody').append(tr);
15 });
Notice that the event is applied to #addPassenger with click(), not
live('click'), because we know this button will exist from the
beginning.
What about the event code for the “Delete” buttons to delete a passenger?