How to append elements with event listener?
Hey guys,
I tried to append a table row to a table by clicking on a button. And
inside the table, I put a link so i can click that and remove the row.
I was using jquery.flydom plugin, by the way.
The HTML looks like:
============HTML==============
-
<table id="PE_Template">
<tr>
<th><a class="removeRow" href="#"><img src="images/12-em-
cross.png" alt="Delete this row" /></a></th>
<td><input type="text" name="label" id="label0" value="" /></td>
<td><input type="text" name="weightage" id="weightage0" value="" /
</td>
<td><textarea name="description" id="description0>" cols="30"
rows="2"></textarea></td>
</tr>
</table>
<input type="button" class="add-row" />
===============================
==============JS===============
-
$(document).ready(function(){
$(".removeRow").click(function(){
$(this).parents('tr').remove();
return false;
});
$(".add-row").click(function(){
$("#PE_Template tbody").createAppend(
'tr',{},[
'th',{},[
'a',{className: 'removeRow', href: '#'},[
'img',{name: 'Delete this row', src: 'images/12-em-cross.png',
alt: 'Delete this row'},[],
],
],
'td',{},[
'input',{type: 'text', name:'label'},[],
],
'td',{},[
'input',{type: 'text', name:'weightage'},[],
],
'td',{},[
'textarea',{name:'description', cols:'30', rows:'2'},[],
],
]
);
return false;
});
});
===============================
I also tried to append the table row with the non-flydom code:
==============JS===============
-
$("#PE_Template tbody").append([
"<tr>",
"<th>","<a class='removeRow' href='#'><img name='' src='images/
12-em-cross.png' alt='Delete this row' /></a>","</th>",
"<td><input type='text' name='label' value='' /></td>",
"<td><input type='text' name='weightage' value='' /></td>",
"<td><textarea name='description' cols='30' rows='2'></
textarea></td>",
"</tr>"
].join(""));
===============================
But the result is that the rows generated by the JS cannot be removed.
Can someone help me solve the problem?
Thanks!
regards,
C1412