admin管理员组

文章数量:1333188

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

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);
Share Improve this question asked Jun 17, 2013 at 3:23 Mr. LavalampMr. Lavalamp 1,8884 gold badges18 silver badges30 bronze badges 1
  • 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 Commented Jun 17, 2013 at 3:30
Add a ment  | 

4 Answers 4

Reset to default 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/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.

You'll need to escape the tilde:

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

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: \.

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.

本文标签: javascriptGetting dynamically created element by ID (Jquery)Stack Overflow