after jQuery upgrade, uncaught exception: Syntax error, unrecognized expression: h3

Question

I'm working on a new version of the website, and am now finding an issue with my javascript code that isn't being handled nicely.

What I have been doing in the past is

$('#lb_outer_title :h3').html(title); 

which changed the text of the title attribute for my lightbox. This worked fine in jQuery 1.3.2, but on the new version (which is using jQuery 1.4.2) I get the error:

uncaught exception: Syntax error, unrecognized expression: Syntax error, unrecognized expression: h3

In the new version I can change the code to the following and it works, but this can't be the optimal solution:

$('#lb_outer_title').html('<h3>'+ title + '</h3>');

I've tried the using :first selector in my new version, but that doesn't work as desired either.

Here is the html that I'm working with (note: I can't add class or id to the h3 tag):

 <div id="lb_outer_title">
   <h3>Title</h3>
  </div>

Answer 1

$('#lb_outer_title h3').html(title); 

Not sure what that colon was doing in there... It is not a valid selector. : is used for psuedo-classes, but you simply want an element.

Answer 2

Your mistake is here:

$('#lb_outer_title :h3').html(title); 

That colon before the h3 should be dropped. jQuery 1.4 has a stricter selector engine and that's why it's reporting your error (since you're using a pseudo-class prefix on an element selector), while jQuery 1.3 merely silently parses the colon away.

Answer 3

Just remove the : like this:

$('#lb_outer_title h3').html(title); 

The colon prefix, :, is used for various pseudo selectors, you just want h3, the element selector.