Search code examples
jqueryformsclone

jQuery - can't change the id of a cloned form in IE

I want to dynamically add rows to the table, what I achieve by cloning the row and changing its id:

var cloned = $('#tempRow').clone().attr("id","tr" + trLastId);

Then I want to change the ids of other components in the row, e.g.:

cloned.find('input[id^="upload"]').attr("id","upload" + trLastId);

The problem arises when I want to change the id of the form, which is the first child of the row and contains all the other components:

cloned.find("form").attr('id', "dynamicForm"+trLastId);

All the lines above work fine in Firefox but the last line does not work in IE8. The clone is not inserted yet(before inserting it I need to change all the ids), just saved into 'cloned' variable. Why IE doesn't allow me to change the id of cloned form? How can I overcome it? I'm using jquery 1.3.2.

Solution

  • Your description suggests that your HTML is not 100% valid, something like <tr><form>...</form></tr> or <tr><td><form></td>...<td></form></td></tr>. JavaScript needs to work in a valid DOM tree so when the browser finds invalid HTML it tries to alter the structure to make it valid. That means that the actual document jQuery is working on may be different from the one you have in mind; it may even vary across browsers.

    Can you confirm whether your HTML validates at http://validator.w3.org/ or any other similar service?