Jquery selector not working when element contains dot in tag name

Question

I have just started using jquery for the first time so i'm not sure if what i'm doing is correct. What i'm trying to do is very basic, I have a script which is adding a css watermark to textboxes upon load in an MVC view.

To select the element i do the following:

jQuery(document).ready(function(){$('#Department.DeptName').addWatermark('input-watermarked', 'test');}); 

Then in my script for adding the css watermarkclass it fails at the "this.val().length" statement.

jQuery.fn.toggleWatermark = function(watermarkedClass, watermarkText) { if (this.hasClass(watermarkedClass)) {     this.removeWatermark(watermarkedClass); } else if (this.val().length == 0) {     this.addClass(watermarkedClass);     this.val(watermarkText); } 

}

The script works fine where an element id is "DepartmentDeptName", it's as if the selector doesn't work when the element id contains a dot inside it. Does anyone know why or how to get around this issue?

Answer 1

I think you should escape the dot with a double-backslash: $("#Department\\.DeptName") See here.

Answer 2

You are trying to access the #Department with a class DeptName. You should escape with two backslashes (as Joril said).

See JQuery Selectors for more info.