jQuery 无法使用 ID 访问 DOM 元素，但可以使用 .class

Question

我之前发布了类似的问题并收到了一些很好的建议。经过进一步调查，我发现这种行为的不同足以引发一个新问题。

我正在寻找有关调试某些奇怪的 jQuery 行为的最佳方法的建议。

以下代码示例按预期工作 here当通过 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 元素，并且按照建议，我尝试使用以下方法而不是单击事件:

<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. 您实际上并没有请求您认为的 ID。
5. 您的 ID 包含无效字符。
6. 该元素位于 iframe 或 frame 中。由于这实际上是一个独立于父文档的文档，因此搜索其他文档将找不到嵌入的 iframe 中的元素。您必须搜索 iframe 本身。

要检查第一项，如果它是静态 HTML，则执行“查看/源代码”并确保页面中包含您真正期望的内容。

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

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