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"

Answer 1

: 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();

Answer 2

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 \

Answer 3

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.