Bug Tracker

Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#9150 closed bug (invalid)

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

Reported by: patrick.deluxe@… 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 9 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 9 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 9 years ago by dmethvin

#9380 is a duplicate of this ticket.

comment:4 Changed 9 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 9 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 9 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 9 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 9 years ago by Rick Waldron

Yours in solidarity:

timmywil +9001

comment:9 Changed 9 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 9 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 9 years ago by anonymous

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

comment:12 Changed 9 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 8 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 8 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 8 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.