Bug Tracker

Opened 12 years ago

Closed 12 years ago

Last modified 10 years ago

#9150 closed bug (invalid)

Setting className property on new elements does not assign to class attribute

Reported by: [email protected] Owned by:
Priority: low Milestone: 1.next
Component: attributes Version: 1.6
Keywords: Cc:
Blocked by: Blocking:


In v. 1.6: Input: $('<div/>', { className: 'foo' }) Output: [<div classname=​"foo">​</div>​]

In v. 1.5: Input: $('<div/>', { className: 'foo' }) Output: [<div class=​"foo">​</div>​]

This is either a regression or an undocumented API compatibility breakage. Which is it?

Change History (15)

comment:1 Changed 12 years ago by timmywil

Component: unfiledattributes
Priority: undecidedlow
Resolution: invalid
Status: newclosed

That was never supported and was coincidental that it worked. The attribute to set is class, not className.

comment:2 Changed 12 years ago by anonymous

Wow... It took me a while to find out what caused my code to become totally non-functional after upgrading to 1.6.1.

WHY do you stop supporting the className attribute as a substitute for the class attribute??? Doesn't pure javascript support - and encourage - this substibution, and is the reason not that 'class' is a reserved word???

You can't imagine the quantity of code that will need to be corrected for apparently absolutely no reason.

comment:3 Changed 12 years ago by dmethvin

#9380 is a duplicate of this ticket.

comment:4 Changed 12 years ago by uipoet

At the very least, jQuery should document that this change occurred. There are many tutorials and plugins out there using this unsupported style. With my particular code, I went from a fully working site to a blank page and no errors in the console when I switched to jQuery 1.6!

comment:5 Changed 12 years ago by Rick Waldron

Drop the jQuery.attrHooks.className code into your plugin modules code:


This will return your code to working order while allowing you to migrate & upgrade painlessly.

comment:6 Changed 12 years ago by anonymous

In any normal release, if this bug were filed the jQuery team would probably have release-noted this as an issue. But this release was so flawed that I suspect that, while operating in "damage control" mode, this issue was buried for political reasons rather than highlighted for engineering ones.

comment:7 Changed 12 years ago by timmywil

This bug is invalid. Passing invalid arguments to attr and having it work was coincidental and subject to change. className is not an attribute, but a property.

Regardless, this would work as well:


comment:8 Changed 12 years ago by Rick Waldron

Yours in solidarity:

timmywil +9001

comment:9 Changed 12 years ago by anonymous

This is a huge ooops in 1.6.1. So much code is broken now. People do this all the time:

var th = $('<th>', {
className: 'grouper',
"gsize": gsize,
"glow": glow,
"ghigh": ghigh
}).insertAfter('#advSearch tr th:eq(' + insertWhere + ')');

because class is a reserved word!

comment:10 Changed 12 years ago by dmethvin

I've update the docs to clarify. The current behavior is correct since the name passed to .attr() should be "class" and not className which is the *property* name.

comment:11 Changed 11 years ago by anonymous

Problem is: if you change className to class it dont work in IE 9.

comment:12 Changed 11 years ago by Rick Waldron

If you put "class" in quotes it shouldn't be a problem. Otherwise, please provide a reduced test case that illustrates the issue in IE9

comment:13 Changed 11 years ago by anonymous

It doesn't work in IE8 even with quotes! I try this case with yoxview plugin and jQuery 1.7.1 and don't work! Please, do something! Not say: it's work when it not work!

comment:14 Changed 10 years ago by anonymous

For yoxview, a workaround is to manually change occurrences like

 panelData.element = $("<div>", {
    className: "class_name"


 panelData.element = $("<div>", {

in the jquery.yoxview-xxx.js file.

comment:15 Changed 10 years ago by anonymous

I've change:

                    if (media.html)
                        panelData.element = $("<div>", {
                                className: mediaPanelClass


                    if (media.html)
                        panelData.element = $("<div>", {

for jquery.yoxview-2.21.js and does not working.

Note: See TracTickets for help on using tickets.