jQuery 选择器在 IE7/8 中不起作用答案

【问题标题】：jQuery selector does not work in IE7/8jQuery 选择器在 IE7/8 中不起作用
【发布时间】：2011-09-25 13:34:42
【问题描述】：

有谁知道为什么这在 IE7/8 中不起作用？

drop_area = $('div#drop_area');

它在 IE9、FF2/3 和 Chrome 中完美运行。 Internet Explorer 7/8 出现以下错误：

SCRIPT438: Object doesn't support this property or method

编辑：这是我的 javascript 附带的 HTML： http://pastebin.com/nwxx8RzW

【问题讨论】：

可能是它的一些其他代码...你可以发布其余的代码吗？
您不需要选择器的 div 部分，因为 ID 是唯一的。
愚蠢的问题，但你试过var drop_area = $('div#drop_area');吗？另外，是否报告了其他错误？您是否尝试将代码粘贴到 JS Lint 并在那里检查错误？
@Cybernate，我当然可以发布它。但是我认为这条特定的行是唯一相关的位，因为当我设置断点时它就在这里崩溃了。完整脚本：pastebin.com/dL8zSiV7
假设你有 <div id='drop_area'>...</div> 在某个地方它在 IE 8 中对我来说很好。

标签： javascript jquery internet-explorer-8 internet-explorer-7 cross-browser

【解决方案1】：

IE 在全局范围内注册某些属性时有一种奇怪的行为。只需使用 ID 即可访问具有给定 ID 的元素。

所以你有一个 ID 为“drop_area”的元素，在 IE 中可以使用这个 ID 访问它，试试：

alert(drop_area.tagName)

..检查一下。（应该给出“DIV”）

那么会发生什么：在使用 drop_area = $('div#drop_area'); 时，您尝试为该元素分配其他内容，但这是对 DOMElement 的无效操作。

所以使用 var-keyword 来说明你要创建一个变量

var drop_area = $('div#drop_area');

或者如果您必须在函数中创建全局变量，请将变量分配给全局上下文：

window['drop_area'] = $('div#drop_area');

【讨论】：

我尝试了 alert(drop_area.tagName) 并且成功了！现在我将尝试使用 var 关键字对其进行分配
好吧，这很有趣，警报工作正常，但是当我尝试运行时： function on_element_drop(event, ui){ console.log(drop_area.tagName);控制台.log（类型的 ui）； var drop_area = $('div#drop_area');我收到错误：SCRIPT5007：无法获取属性“tagName”的值：对象为空或未定义
这一定是开发者工具栏中的错误。您在记录后分配变量，因此在记录时它应该给出 DIV 而不是错误。此外，该对象不会为 null 或未定义，它是 jquery 对象或 DOMElement。

【解决方案2】：

您在pastebin 上显示的代码存在许多全局变量问题。换句话说，您正在编码假设您声明的变量在范围内是局部的，而实际上它们是全局的。示例包括set、box_handle、elements、i、id、drop_area、element、row、image_id 等。您的所有函数在范围内也是全局的, 当它们可以很容易地封装在其他函数中时。

现在我不知道是否发生了一些微妙的交互，是否某些代码具有由其他代码设置的锤击（全局）数据，但似乎某些东西正在被覆盖，因此方法和属性正在消失。我将首先浏览代码并将var 添加到局部变量中。接下来，我将把大部分代码封装在一个匿名自动执行函数中。

【讨论】：

感谢您的建议。你能快速演示我将代码封装在里面的“匿名自动执行函数”的语法吗？
说实话，您已经在使用一个合适的功能：文档准备功能。您可以在其中移动很多代码。例如，您的文档就绪函数的第二条语句调用load_elements()。您可以轻松地将该功能移动到文档就绪功能中，而不会丢失功能。以此类推。
感谢您的建议。我尝试将变量重命名为其他名称并且它有效。但是，如果我尝试使用 'drop_area' 前面的 'var' 关键字使其成为局部变量，我仍然会遇到同样的问题。你知道为什么会这样吗？
@Casey：我的建议是检查您将某些内容分配给变量的每一个案例。它是局部变量（即函数的局部变量）吗？在这种情况下，它应该有一个 var 或者它应该已经在同一个函数中用一个 var 声明。在整个代码中执行此操作，而不仅仅是在这一点。

【解决方案3】：

通常该错误表明，您在也使用 Prototype 的网站上使用 jQuery。这就是为什么会出现错误（实际上是由 Prototype 抛出的）。另一种可能性是，您尝试在将 jQuery 库包含到 HTML 之前调用代码。

为确保这不是我的第一个猜测，请将此代码添加到您的 JS 代码中：

$.noConflict();

因此，在包含 jQuery 之前，将 Prototype 包含到 HTML 中很重要：http://api.jquery.com/jQuery.noConflict/

如果你用 jQuery() 替换所有出现的 $() 并且它可以工作，这是同时使用 jQuery 和 Prototype 的第一个问题。

【讨论】：

感谢您的回复。我不确定这是否是问题，因为 1. 我没有使用原型或任何其他 JS 框架和 2. 问题是 IE7/8 独有的，适用于所有其他 Web 浏览器
当您粘贴包含 HTML 的 gull 示例时，我们可能会发现您的代码存在问题。这条线本身对我来说绝对没问题。
您可以在此处阅读：jqueryui.com/demos/droppable/#event-drop 您可以使用$(this) 获取 drop_area，这可能是适用于 IE7/8 的解决方案。
其实是个好主意。我试过了，但不幸的是它仍然返回相同的错误。函数 on_element_drop(event, ui){ console.log(typeof ui); //var drop_area = $('div#drop_area'); drop_area = $(this); //drop_area = $(document.getElementById('drop_area')); //element = ui.helper;
顺便说一句，这是我的 javascript 附带的 HTML：pastebin.com/nwxx8RzW

【解决方案4】：

你有一个 id 为“drop_area”的元素吗？即 6/7/8 自动使用元素 id 将全局变量分配给 dom 元素。更多代码会有所帮助。

【讨论】：

我确实有一个 ID 为 drop_area 的元素，该代码在其他浏览器中似乎运行良好。我将附上我的html。谢谢！
尝试在 js 中使用不同的名称，或者更好地确保始终对它们进行 var。