Question

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

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

以下代码示例在通过ID或类引用附加到ul时按预期工作here。

<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不起作用：

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

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

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

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

Answer 2

您可能有2个具有相同ID的元素。

Answer 3

尝试将函数放在$（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>

希望这会有所帮助......

Answer 4

我发现某些第三方库会覆盖jQuery $方法。在我们的例子中，它导致jQuery选择器#elementID被传递到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);
}

我们仅在整个脚本文件中将函数从$重命名为$i3c。这允许所有其他依赖jQuery的java脚本成功找到元素并修复了问题。

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

4 个答案: