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

admin管理员组

文章数量:1289402

I'm parsing a JSON response via $.ajax() and building a form from this object's values. The script I've written is long, but here's what it's doing:

1. Dynamically creating:
   ~ a form element,
   ~ a fieldset element,
   ~ a button element,
   ~ 20 or so text inputs and label elements

2. Appending the inputs and labels to the fieldset

3. Appending the button to the fieldset

4. Appending the fieldset to the form

5. Appending the form to an element in the existing DOM.

Everything is working in all browsers except one small snippet in IE. I've narrowed it down to the following piece of code. (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 from above. It creates a button element, adds a class, sets the type attribute to submit, gives it some text, and then appends it to the fieldset. IE fails with the error "Object doesn't support this action"

If I ment out the .attr() line like this:

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

Everything works as expected.

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

I'm parsing a JSON response via $.ajax() and building a form from this object's values. The script I've written is long, but here's what it's doing:

1. Dynamically creating:
   ~ a form element,
   ~ a fieldset element,
   ~ a button element,
   ~ 20 or so text inputs and label elements

2. Appending the inputs and labels to the fieldset

3. Appending the button to the fieldset

4. Appending the fieldset to the form

5. Appending the form to an element in the existing DOM.

Everything is working in all browsers except one small snippet in IE. I've narrowed it down to the following piece of code. (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 from above. It creates a button element, adds a class, sets the type attribute to submit, gives it some text, and then appends it to the fieldset. IE fails with the error "Object doesn't support this action"

If I ment out the .attr() line like this:

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

Everything works as expected.

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

• javascript
• jquery
• internet-explorer
• dom
• attributes

Share Improve this question Follow asked Oct 14, 2010 at 19:33 StephenStephen 19k1010 gold badges6262 silver badges9898 bronze badges 3

• What happens if you doc.createElement() it first, assign it the type in plain JS, and then turn it into a jQuery object? Just to find out which step the problem is in? – Pekka Commented Oct 14, 2010 at 19:35
• 1 You may want to think about using a jQuery templating engine - example – John Strickler Commented Oct 14, 2010 at 19:41
• Good idea John. Pekka, per Nick's answer it seems to be jQuery-By-Design. – Stephen Commented Oct 14, 2010 at 19:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

jQuery doesn't allow you to change the type of an <input> or <button> element.

The reason for this is consistency, and IE doesn't allow you to change the type once it's been inserted into the DOM.

jQuery won't let you modify the type attribute on an existing button element because IE throws an error when you try to do so.

However, you can try something like this (using jQuery 1.4's more concise element creation syntax):

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

本文标签：