Hi I'm pretty new to jquery and I've basically got a form which allows you to add additional fields and take them away, I've got it adding and removing any fields that are there when the page loads but any that are added after that the controls don't do anything.
I've got each form element like the following: <div class="rtn_item" id="{position()}"> <input type="text" size="7" name="starttime[]" value=""/> <input type="text" size="70" name="time_desc[]" value=""/> <a class="addField" id="{position()}">+</a> <a class="removeField" id="{position()}">-</a> </div> Because I'm using xslt for rendering I'm using a position counter to allow me to reference which fields has been selected. The JS I've got for the controls is: $('.addField').click(function() { selrow = $(this).attr("id"); $('#'+selrow).after(" <div class=\"rtn_item\" id=\""+insertcnt+"\"><input type=\"text\" size=\"7\" name=\"starttime[]\" value=\"\"/> - <input type=\"text\" size=\"70\" name= \"time_desc[]\" value=\"\"/> <a class=\"addField\" id= \""+insertcnt+"\">+</a> <a class=\"removeField\" id= \""+insertcnt+"\">-</a></div> "); $('#'+insertcnt).slideDown('slow'); insertcnt++; } ); $('.removeField').click(function() { selField = $(this).attr("id"); $("#"+selField).slideUp('slow').remove(); } ); insertcnt is just a global variable to create a unique id for each field So I can add new fields but the controls on the new fields don't work, any help with this would be very much appreciated. Thanks