Unrecognized expression with a jQuery("#someIdName") element reference

Question

Sorry, I did look for the answer before posting. But I couldn't find what I was looking for.

I am trying to use jQuery UI's tag-it widget. I'm trying to apply the .tagit() method to an element as follows:

jQuery("#myTags:.5aedf589").tagit();

The actual element on the page to which I'm trying to apply the tagit() method is this:

<ul id="myTags:.5aedf589">

That should be a legal id name, but just in case I also tried it with just "#myTags" and have the same problem.

I am using jQuery instead of the $ alias because my script contains both Prototype and jQuery. jQuery is loaded first, and from the docs it says I should be able to use jQuery instead of $ even without using noConflict(). I did try using noConflict too, but it didn't help.

The problem is that the above jQuery expression results in the following JavaScript error:

Syntax error, unrecognized expression: "#myTags:.5aedf589"

Ruan Mendes · Accepted Answer · 2012-09-25T17:31:14.927

2

: and . have special meaning in queries, the period is a class selector and the colon is the pseudo selector. If you want to use them for something else, you have to escape them with a \, and escape the \ for a JS string; therefore, insert \\ before them. http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F

jQuery("#myTags\\:\\.5aedf589").tagit();

edited Sep 25 '12 at 17:31

answered Sep 25 '12 at 04:09

Ruan Mendes

90,375
31
153
217

Well, I'll be. I... didn't know that. It worked! (Also, just "#myTags" was also working in my current version.) Thanks! – Doug Lerner Sep 25 '12 at 06:20

score 0 · Answer 2 · answered Sep 25 '12 at 04:09

Why don't you try this selector and see if it works

jQuery("[id*=5aedf589]").tagit();

It will select the id that has the 5aedf589 and select that selector.. This is just to check if the selector was the actual problem.

If you have a problem that multiple selectors might match escape . and : with \

score 0 · Answer 3 · answered Sep 25 '12 at 06:00

Error is due to the id of element. Yes its a valid id for HTML element but for jquery which uses class based selectors ':' refer to pseudo selector and '.' refer to class thats why it throw unrecognized expression error. for pseudo selector you don't use class ahead of pseudo selector

Either you escape it like @Juan Mendes said. or change the id of element.

Unrecognized expression with a jQuery("#someIdName") element reference

3 Answers3