this.id in jQuery won't fetch the element id if it is a number or contains numbers

Question

I have a bunch of automatically generated divs that have a number for their id. Whenever I use this.id to fetch the id it outputs nothing. However when the Id is text only it outputs the id properly. How could I fix this? Anything Helps. Thanks

Edit:

$(".draggable").draggable();
$("*", document.body).click(function (e) {   
                var offset = $(this).offset();
                e.stopPropagation();
                $("#result").text(this.tagName + "  ID:" + this.id + " Coord:" + offset.left + " " + offset.top);
                $.post("http://localhost/framework/test.php", "id=" + this.id + "&x=" + offset.left + "&y=" + offset.top);
            });

This is the offending code. It will get the id of divs however, with the "draggable" class not applied.

   <div id="container">

       <div id="1" class="draggable" style="top:55px; left:55px; border: 2px solid black; display: inline-table; position: relative; background-color: grey; max-width: 500px;">
            <div>Im an Image Posted by:Teh_noob Posted on: 9/15/1991</div>

            <div><img src="http://video.google.com/img/logo_video.gif?hl=en" /></div>
       </div>

       <div id="2" class="draggable" style="top:57px; left:33px; border: 2px solid black; display: inline-table; position: relative; background-color: grey; max-width: 500px;">
            <div>Youtube test Posted by:teh nub Posted on: 9/11/01</div>
            <div><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/_AJ0SkbPxAk&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><embed id="flash" wmode="transparent" src="http://www.youtube.com/v/_AJ0SkbPxAk&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowfullscreen="true" width="640" height="385"></embed></object></div>
       </div>

       <div id="3" class="draggable" style="top:33px; left:12px; border: 2px solid black; display: inline-table; position: relative; background-color: grey; max-width: 500px;">
            <div>Text box Posted by:teh noob Posted on: 8/23/09</div>

            <div>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</div>
       </div>

    </div>
    <p id="result"></p>

score 6 · Answer 1 · edited May 23 '17 at 10:33

6

Note that numeric-only IDs are invalid. See this post for more info.

The short and sweet of it is:

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 (".").

edited May 23 '17 at 10:33

Community

1
1

answered Apr 01 '09 at 02:04

Michael Haren

105,752
40
168
205

I will be. Later on in development. Wanna help? – Apr 01 '09 at 02:28
2

@Steve, Fix your ID problem and the problem you're asking about will go away (most likely). =] Two birds with one stone. – strager Apr 01 '09 at 03:29
It wont because I have tested it that way and the problem still exists. – Apr 01 '09 at 03:44
@Steve, Then something else must be wrong. Can you post your HTML? – strager Apr 01 '09 at 04:05

score 0 · Answer 2 · answered Jun 27 '10 at 20:33

In the generated html add a prefix like:

<div id="prefix_1" class="draggable" style="top:55px; left:55px; border: 2px solid black; display: inline-table; position: relative; background-color: grey; max-width: 500px;">
        <div>Im an Image Posted by:Teh_noob Posted on: 9/15/1991</div>

And in the java script, add the same prefix

score 0 · Answer 3 · answered Jun 23 '11 at 07:31

You are trying to get the IDs of elements with other child elements who cover them entirely... that's why you don't get any ID.

Instead of this.id, try e.target.id. If you click on the flash movie then, you get id="flash".

http://jsfiddle.net/rzfPP/49/

Also you were targeting the wrong element.

score 0 · Answer 4 · answered Apr 01 '09 at 13:51

0

Although it is allowed to use periods and colons, I wouldn't recommend it.

If you ever have to do a selection based on the id jQuery will fail because it will think that it's a new class selector or a filter.

answered Apr 01 '09 at 13:51

Simon

142
1
2

this.id in jQuery won't fetch the element id if it is a number or contains numbers

4 Answers4

Linked