OOPS!!!! jQuery Selectors NOT working...

OOPS!!!! jQuery Selectors NOT working.. A very common jQuery problem/issue that you must have face or may face. And there could be tons of reason of selectors not working properly like incorrect syntax, incorrect context.. But do you know there could be another reason which is element ID or css class name?

Yes, you read it right. Sometimes, if the ID or class containing meta characters such as @ # !" $ % &' ()*+,./:;<=>?[\]^`{|}~ like "foo.bar", "[email protected]" , "id#title"....

Related Post:

For example, if your element ID is "myid.3" then below code will not work.
$('#myid.3').text('DIV Content Updated');
From jquery API document :

"To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>[email protected][\]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar")"

So, the correct syntax is,
$('#myid\\.3').text('DIV Content Updated'); 
So, if your ID contains any meta character then use backslashes for selecting elements. But it is not advisable to use meta-characters in DOM identifier as your HTML is not validated. Read http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

Feel free to contact me for any help related to jQuery, I will gladly help you.

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..