0

I am using JQuery, and I am creating elements dynamically via before() but I am unable to access those elements via ID. It's a bunch of code and I'd rather not post it if possible, but I am checking the text being used as the selector and then checking the length; the length says 0, but I am cross-referencing with the "inspect element" tool in chrome and the ID is most certainly what it should be. Is this a known problem with newly created elements? When I was accessing the element by accessing siblings of a given class it worked just fine, but now there are multiple siblings with the same class and the most efficient way to do things is with an ID.

Here's what I mean when I say I'm checking the text:

alert("id=\"impactPlusMinus~"+questionAnswerNameId+"\"\n"+
$("#impactPlusMinus~"+questionAnswerNameId).length);
Mr. Lavalamp
  • 1,860
  • 4
  • 17
  • 29
  • You need to access those elements after they are already in the DOM. Have you tried putting your js codes inside the document ready? – Ben Gulapa Jun 17 '13 at 03:30

4 Answers4

5

The tilde ~ is not a valid character for the id attribute in HTML4. Try using a different character.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Source: HTML4 specification. http://www.w3.org/TR/html4/types.html#type-id

The HTML5 specification is not so strict on this, but you may run into problems using the tilde on many browsers or frameworks like jQuery. For instance, in jQuery, the tilde in a selector means something else entirely.

bfavaretto
  • 71,580
  • 16
  • 111
  • 150
tb11
  • 3,056
  • 21
  • 29
4

You'll need to escape the tilde:

$("#impactPlusMinus\\~"+questionAnswerNameId)
James Montagne
  • 77,516
  • 14
  • 110
  • 130
2

Since you are using reserved keywords in Id, You can access it as an attribute value or escape the special char with \\ if you are directly accessing it.

$('[id="impactPlusMinus~' + questionAnswerNameId+ '"]'

or

 $("#impactPlusMinus\\~" + questionAnswerNameId);

from docs

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \.

PSL
  • 123,204
  • 21
  • 253
  • 243
  • The former is definitely a no-no whereas the latter just raises an eyebrow :) – Ja͢ck Jun 17 '13 at 03:47
  • @Jack Former one helps without a need to explicitly escape if the id contains reserved chars, dynamically probably with a regex or something. Why raising an eyebrow for latter one? – PSL Jun 17 '13 at 03:50
  • 1
    The first isn't optimized (not explicitly anyway); the latter eyebrow raiser is just because ... imo there should be a special case for finding stuff by id that doesn't include escaping certain characters :) – Ja͢ck Jun 17 '13 at 03:52
1

To avoid clashes with how jQuery determines what an identifier looks like, especially in the case of HTML5 which is less strict about naming, you could create the element reference like this:

$(document.getElementById('impactPlusMinus~' + questionAnswerNameId));

This makes sure only the browser is used to find the element, after which the jQuery constructor is applied.

Ja͢ck
  • 170,779
  • 38
  • 263
  • 309