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