javascript - jQuery can't find div with specified id - Stack Overflow

admin管理员组

文章数量:1396858

I am using jQuery to find a div with a specific id, except it return null. This is strange since trying to find other divs works just fine.

Jquery

$(document).ready(function()
{
    //Finds parent div without a problem
    console.log($('#next-sheet'));

    //Returns null, can't find the div I really need
    console.log($('#start-course'));

    //Also returns null
    console.log($('#next-button'));

    //Still returns null, can't find the div
    console.log($('#next-sheet #start-course'));
});

HTML

<div id='next-sheet'>
    <a href="/courses/start/<?php echo $data['Courses']['Course']['id']; ?>" class='right disable-hover'>
        <div class='button' id='start-course next-button' data-callbackdata="<?php echo $data['Courses']['Course']['name']; ?>" >Start Course</div>
    </a>
    <div class="clear"></div>
</div>

This is very strange, I am using the .ready function, so the html is available, because it can find the parent div. But when I try to find the child div, it can't find anything.

jQuery is loaded correctly, same as all the other stuff. It's all just static HTML. I am using CakePHP, but that should be not the problem.

Is there something I am missing here?

I am using jQuery to find a div with a specific id, except it return null. This is strange since trying to find other divs works just fine.

Jquery

$(document).ready(function()
{
    //Finds parent div without a problem
    console.log($('#next-sheet'));

    //Returns null, can't find the div I really need
    console.log($('#start-course'));

    //Also returns null
    console.log($('#next-button'));

    //Still returns null, can't find the div
    console.log($('#next-sheet #start-course'));
});

HTML

<div id='next-sheet'>
    <a href="/courses/start/<?php echo $data['Courses']['Course']['id']; ?>" class='right disable-hover'>
        <div class='button' id='start-course next-button' data-callbackdata="<?php echo $data['Courses']['Course']['name']; ?>" >Start Course</div>
    </a>
    <div class="clear"></div>
</div>

This is very strange, I am using the .ready function, so the html is available, because it can find the parent div. But when I try to find the child div, it can't find anything.

jQuery is loaded correctly, same as all the other stuff. It's all just static HTML. I am using CakePHP, but that should be not the problem.

Is there something I am missing here?

• javascript
• jquery
• dom
• html

Share Improve this question Follow asked Mar 31, 2014 at 7:39 DijkeMarkDijkeMark 1,32655 gold badges2020 silver badges4141 bronze badges 3

• Here is a problem id='start-course next-button' remove next-button from id – Pavlo Commented Mar 31, 2014 at 7:41
• You shouldn't use spaces, the reason for this is simple, space character is not a valid for ID attribute. – Satpal Commented Mar 31, 2014 at 7:42
• HTML5 allows spaces and many more characters for IDs, though a space would need to be escaped in the selector. $("start-course\\ next-button") – cookie monster Commented Mar 31, 2014 at 7:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Since id is unique, you can only have one id for an element, so use:

id='start-course'

or:

id='next-button'

instead of:

id='start-course next-button'

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

id='start-course next-button' is NOT OK. Try with start-course_next-button

If you want to find control by more than one "name" use classes

<div class="class1 class2"/>

This should be OK

   console.log($('.class1'));
   console.log($('.class2'));
   console.log($('.class1.class2')); 

You can't have multiple ids for same element -

id='start-course next-button'  // this is wrong

Although you can have multiple classed like this -

class='button start-course next-button' // you will need to replace # with . 

You can also try "End with" selector

$("element[id$='txtTitle']")

ie

$("div[id$='next-button']")

本文标签： javascriptjQuery can39t find div with specified idStack Overflow