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

admin管理员组

文章数量:1296855

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=".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=";hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><embed id="flash" wmode="transparent" src=";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>

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./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./v/_AJ0SkbPxAk&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><embed id="flash" wmode="transparent" src="http://www.youtube./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>

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 1, 2009 at 4:13 asked Apr 1, 2009 at 1:59 SteveSteve

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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 (".").

Although it is allowed to use periods and colons, I wouldn't remend 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.

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

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/rzfPP/49/

Also you were targeting the wrong element.

本文标签： javascriptthisid in jQuery won39t fetch the element id if it is a number or contains numbersStack Overflow