delegate and add row
HTML
<table border=1 width=50%>
<thead>
<tr><td><a href='#' id='add'>Add</a></td></tr>
</thead>
<tbody>
<tr><td>
<select class='drop' name="blah_1_drop">
<option></option>
<option value="1">Show</option>
<option value="2">Hide</option>
<option value="3">greg</option>
</select>
<div style="display:none" class='showme'>
Hi
</div>
</td></tr>
</tbody>
</table>
JavaScript
var $table = $('table');
function toggle() {
var $this = $(this),
$showme = $this.parent().find('.showme');
if ($this.val() == '1') {
$showme.show();
}
else {
$showme.hide();
}
}
function addone() {
var $item = $table.find('tbody:first'),
storedRowIndex = $table.data('rowIndex'),
rowIndex = storedRowIndex ? storedRowIndex + 1 : $table.find('tbody').length + 1,
$newItem = $item.clone();
$newItem.html($newItem.html().replace(/_\d_/g, '_' + (rowIndex).toString() + '_'));
//clearItem($newItem);
$table.append($newItem);
toggle.call($newItem.find('.drop')); //call() sets the 'this' object in function
$table.data('rowIndex', rowIndex);
}
$('#add').click(addone);
//$table.find('.drop').change(toggle);
$table.delegate('.drop', 'change', toggle);