JQuery.attr ('type', 'submit') on a button element giving me a strange error in IE7

Question

I parse the JSON response through $.ajax() and build the form from these object values. I wrote a script for a long time, but here is what it does:

• Dynamic creation:
  ~ form element
  ~ field set item,
  ~ button element,
  ~ 20 or so text inputs and label elements

• Adding inputs and labels to a set of fields

• Adding a Button to a Field Set

• Adding a field set to a form

• Adding a form to an element of an existing DOM.

Everything works in all browsers, except for one small fragment in IE. I narrowed it down to the next code snippet. ( doc is a variable containing document )

 fieldset.append( $(doc.createElement('button')) .addClass('ui-button') .attr('type', 'submit') .html('Re-Rate') .button() ); 

This is step 3 above. It creates a button element, adds a class, sets the type attribute to submit , gives it some text, and then adds it to the set of fields. IE with an error "Object does not support this action"

If I comment out the .attr() as follows:

 fieldset.append( $(doc.createElement('button')) .addClass('ui-button') //.attr('type', 'submit') .html('Re-Rate') .button() ); 

Everything works as expected.

If you're interested, the .button() method is a jQuery UI

Answer 1

jQuery does not allow you to change the type an <input> or <button> element .

The reason for this is consistency, and IE does not allow you to change type after it is inserted into the DOM.

Answer 2

jQuery will not allow you to change the type attribute in an existing button element because IE throws an error when trying to do this.

However, you can try something like this (using the syntax to create a more concise jQuery 1.4 element):

 fieldset.append( $('<button>', {'type': 'submit', 'class': 'ui-button', 'html': 'Re-Rate'}).button() );