jQuery 无法使用 ID 访问 DOM 元素，但可以使用 .class
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6918796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery can't access a DOM element using ID but can with .class
提问by Gunnar
I posted a similar question earlier and received some good suggestions. After further investigation, I found that the behavior is different enough to warrant a new question.
我之前发布了一个类似的问题，并收到了一些很好的建议。经过进一步调查，我发现这种行为的不同足以引起一个新的问题。
I am looking for suggestions as to the best way to debug some odd jQuery behavior.
我正在寻找有关调试一些奇怪的 jQuery 行为的最佳方法的建议。
The following code sample works as expected herewhen appending to the ul by either ID or class reference.
当通过 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>
However, in my application, I am unable to append using the #myList ID reference and I can't figure out why. I am dynamically rendering the ul and li elements and I have tried, as suggested, to use the following approach instead of the click event:
但是，在我的应用程序中，我无法使用 #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>
In FireBug console, I can interact with the object using .myClass, but not #myList. For example, typing the following into FireBug console:
在 FireBug 控制台中，我可以使用 .myClass 与对象交互，但不能使用 #myList。例如，在 FireBug 控制台中输入以下内容：
>>$('#myList').hide()
does not hide the #myList element as I would expect. The console simply returns [].
不会像我期望的那样隐藏 #myList 元素。控制台只返回 []。
Any suggestions are appreciated.
任何建议表示赞赏。
回答by jfriend00
There are only five reasons I know of that addressing an ID won't work:
我所知道的解决 ID 不起作用的原因只有五个：
- That ID is not really in the page like you think it is.
- The element with that ID hasn't been loaded yet.
- That ID is in the page more than once.
- Your aren't actually requesting the ID you think you are.
- Your ID contains invalid characters.
- The element is in an iframe or frame. Since this is actually a separate document from the parent document, searching some other document will not find elements in an embedded iframe. You would have to search the iframe itself.
- 该 ID 并不像您想象的那样在页面中。
- 尚未加载具有该 ID 的元素。
- 该 ID 多次出现在页面中。
- 您实际上并不是在请求您认为的 ID。
- 您的 ID 包含无效字符。
- 该元素位于 iframe 或框架中。由于这实际上是一个独立于父文档的文档，搜索其他文档将不会在嵌入的 iframe 中找到元素。您将不得不搜索 iframe 本身。
To check on the first item, if it's static HTML, then do a View/Source and make sure you have in the page what you really expect to be there.
要检查第一项，如果它是静态 HTML，然后执行 View/Source 并确保页面中有您真正期望的内容。
If it's dynamically generated HTML, then you will need to break in the debugger at a point where the object has been created and use the object inspector to make sure that it's really there with the appropriate ID.
如果它是动态生成的 HTML，那么您将需要在创建对象的位置中断调试器，并使用对象检查器来确保它确实存在并具有适当的 ID。
Remember that IDs can only exist once in the page. If there is more than one object with the same object, then getElementById or $("#xxxx") is undefined and will not return reliable results.
请记住，ID 在页面中只能存在一次。如果有多个对象具有相同的对象，则 getElementById 或 $("#xxxx") 未定义并且不会返回可靠的结果。
回答by Dave L.
You probably have 2 elements with the same ID.
您可能有 2 个具有相同 ID 的元素。
回答by AJC
try putting the functions inside $(document).ready to make sure the DOM elements are loaded, like this:
尝试将函数放在 $(document).ready 中以确保加载 DOM 元素，如下所示：
<script>
$(document).ready(function() {
$('#submitID').click(function(){
$('#myList').append('<li>fourth list item</li>');
});
$('#submitClass').click(function(){
$('.myClass').append('<li>fourth list item</li>');
});
});
</script>
Hope this helps...
希望这可以帮助...
回答by alan
I found that some 3rd party libraries will override the jQuery $method. In our case it caused the jQuery selector #elementIDto be passed into document.getElementById("#elementID")which clearly won't find the item since #is a jQuery selector. Function override below:
我发现一些 3rd 方库会覆盖 jQuery$方法。在我们的例子中，它导致#elementID传入的 jQuery 选择器document.getElementById("#elementID")显然找不到该项目，因为它#是一个 jQuery 选择器。下面的函数覆盖：
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (Object.isString(element))
element = document.getElementById(element);
return Element.extend(element);
}
We renamed the function from $to $i3cthroughout that script file only. This allowed all other jQuery-dependent java script to succeed in finding the element and fixed the issue.
我们从改名功能$，以$i3c在整个只有脚本文件。这允许所有其他依赖于 jQuery 的 java 脚本成功找到元素并修复了问题。
