jquery dynamically adding button element with 'type' attribute failed in IE7.

Question

The code

var comment = $('<div>')
        .addClass('comment') // problem in IE7
        .attr('id', 'comment-'+item.id)
        .appendTo($('#comments-list');

The problem

When program executes to .adddClass in IE7, got error message

 Object doesn't support this action

I got this error from IE debugbar.

Any fixes?

[correction] :

I've done further debugging. And found out that the problem didn't lie on addClass call. It was another part code which doesn't work in IE7. Sorry for wasting you guys' time.

For the record since I wasn't able to delete this question, here is the buggy code(in ie7):

$('<button>')
   .attr('type', 'button') // This failed in IE7

probably because it doesn't support a dynamically added 'type' attribute. I guess I have to switch to the <input> element now

$('<input')
   .attr('type', 'button')
   .attr('value', 'Button Text')

This I just tested in IE7 and works. Tho I still prefer the $('<button>') case, so if anybody have any work arounds, please help me here.

Thanks in advance.

Answer 1

You need to pass valid XML when creating the element.

Change it to:

$('<div></div>')
    ...

Answer 2

A link to the page where the error occurs might help. It seems to me the problem doesn’t lie with the .addClass() function…

Anyway, why not just do this?

var comment = $('<div class="comment" id="comment-' + item.id + '" />')
    .append($('#comments-list');

Also, don’t you mean to say .appendTo($('#comments-list'))? Right now, you’re appending the entire comments list to the new comment.

---

Update: I’ve read your edit. Again, if your code doesn’t work, why not just try something like this?

$('<button type="button">Button Text</button>')

I don’t see anything wrong with it.

Answer 3

Hi! Just to elaborate on this (mostly for others who, like me, find this on Google). I had almost the exact same problem:

$('<button />')
   .attr('type', 'button')

Gave an

Object doesn't support this action

As it turns out (at least for me), the problem was NOT the dynamic assignment of type, but the fact that IE apparently does not like the type "button" on a button-element.

Changing things to

$('<input />')
   .attr('type', 'button')

made everything work.