jQuery不能使用ID访问DOM元素,但可以使用.class

Question

我之前发布了类似的问题,并收到了一些很好的建议.经过进一步调查后,我发现行为不同,足以保证一个新问题.

我正在寻找关于调试一些奇怪的jQuery行为的最佳方法的建议.

当通过ID或类引用附加到ul时,以下代码示例在此处按预期工作.

<input type="submit" id="submitID" value="ID" />
<input type="submit" id="submitClass" value="Class" />

<ul id="myList" class="myClass">
    <li>first list item</li>
    <li>second list item</li>
    <li>third list item</li>
</ul>

<script>
    $('#submitID').click(function(){
        $('#myList').append('<li>fourth list item</li>');
    });

    $('#submitClass').click(function(){
        $('.myClass').append('<li>fourth list item</li>');
    });
</script>

但是,在我的应用程序中,我无法使用#myList ID引用附加,我无法弄清楚原因.我正在动态呈现ul和li元素,并且我已经尝试使用以下方法而不是click事件:

<script>
    $('#submitID').live('click', function(){
        $('#myList').append('<li>fourth list item</li>');
    });

    $('#submitClass').live('click', function(){
        $('.myClass').append('<li>fourth list item</li>');
    });
</script>

在FireBug控制台中,我可以使用.myClass与对象进行交互,但不能使用#myList.例如,在FireBug控制台中键入以下内容:

>>$('#myList').hide()

不像我期望的那样隐藏#myList元素.控制台只返回[].

任何建议表示赞赏.

Answer 1

我知道只有五个理由解决ID不起作用:

1. 该ID并不像您认为的那样真正在页面中.
2. 尚未加载具有该ID的元素.
3. 该ID不止一次出现在页面中.
4. 您实际上并没有要求您认为自己的身份证.
5. 您的ID包含无效字符.
6. 元素位于iframe或框架中.由于这实际上是与父文档分开的文档,因此搜索其他文档时将无法在嵌入式iframe中找到元素.你必须搜索iframe本身.

要检查第一个项目,如果它是静态HTML,那么请执行查看/来源并确保您在页面中有您真正期望的那样.

如果它是动态生成的HTML,那么您将需要在创建对象的位置中断调试器并使用对象检查器确保它确实存在具有适当ID的位置.

请记住,ID只能在页面中存在一次.如果有多个对象具有相同的对象,则getElementById或$("#xxxx")未定义,并且不会返回可靠的结果.