Learning jQuery

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", "xyz@pqr" , "id#title"....

Related Post:

• 5 Reasons of jQuery - $ is not defined error
• jQuery selectors code snippets demo
• Tips to use jQuery selectors efficiently

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 !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) 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.