jQuery gotcha with ‘class’

Not jQuery specific, but ran into a cross browser issue today with the following snippet:

$('<span/>',{class: 'check', text: 'Checking'}).insertAfter('#checker');

This will work fine in Firefox, but in Safari it throws a parse error. Evidently ‘class’ is a reserved word in webkit. The solution is to quote it:

$('<span/>',{'class': 'check', text: 'Checking'}).insertAfter('#checker');

The documentation even shows an example of this exact thing, but doesn’t point it out explicitly.

About John Herren

John Herren is a developer and technical consultant with focus on web applications. He currently serves as Director of Development for Primetime US, the company behind the hit movie and book The Secet. John was formerly staff writer and developer community evangelist for Zend Technologies. Along with founding neat experiments like TagCloud.com, John is an active member in the mashup community, working with API providers and speaking at conferences. He is a published author of Linux certification study material. John enjoys using open source software like PHP and Ruby on Rails to bend the web into exciting new chimeras of hyperlinked goodness. View all posts by John Herren

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: