jQuery - IE7 - 变量未定义（适用于 Chrome、Safari、Firefox）答案

【问题标题】：jQuery - IE7 - variable is undefined (works in Chrome, Safari, Firefox)jQuery - IE7 - 变量未定义（适用于 Chrome、Safari、Firefox）
【发布时间】：2012-05-24 05:11:49
【问题描述】：

我正在开发一个网站，并且正处于一个美妙的阶段，在 Chrome、Safari、Firefox（Windows 和 Mac 版）中一切正常，然后你需要额外花 24 小时为 IE 修复它。

我已经为此苦苦挣扎了很久，但最后发生的事情是一个变量在 IE7 中总是“未定义”。

它来自一个名为 data-title 的 html5 数据属性。

我环顾四周，也尝试了this 和this stackoverflow 问题中提供的解决方案。

所以，我试过了

$(this).attr('data-title');

和

$(this).data('title');

关于最后的解决方案

var newTitle = $(this).getAttribute("data-title");

我收到一个错误：

Uncaught TypeError: Object [object Object] has no method 'getAttribute'

问题是，我无法使用 getElementById 加载变量，因为元素是由 jQuery Maximage 生成的

生成的元素如下所示：

<div class="mc-image collection-image" title="" style="background-image: url(http://www.server.com/image.jpg); position: absolute; top: 0px; left: 0px; z-index: 12; opacity: 1; display: block; width: 1292px; height: 670px; " data-title="The&nbsp;Title" data-href="#collection-description-172"></div>

我正在使用data-title 属性在maximage/jQuery 循环更改图像时将文本设置在侧面的另一个div 中。

我完全不知所措。

【问题讨论】：

仅供参考，IE7 不是 HTML5 浏览器，因此可能与属性问题有关。我不是 100% 确定 IE7 如何处理非标准属性。话虽如此，我不再支持 IE7。使其工作所需的输入量少于输出量，因为只有不到 2.3% 的人仍在使用 IE7！来源：w3schools.com/browsers/browsers_explorer.asp 或者换个角度看，97.7%的人没有使用IE7。
@jmort253 感谢您提供信息。我同意，当时支持 IE7 实际上并不那么重要，所以我将浏览器升级到 IE8，但不幸的是，变量仍然是未定义的。任何想法如何进行调试？我试过调试栏，但它没有抛出任何错误。
如果你为 $(this) 添加一个手表并检查它会发生什么？里面有什么？只是为了检查你的选择器是否让你进入提到的代码是正确的......
@Jeroen 在下面的 cmets 中，我设置了 Debugbar/companionJS 并看到 $(this).html() 正在提供图像 <IMG style="MARGIN-TOP: -268px; WIDTH: 1359px; HEIGHT: 849px; MARGIN-LEFT: 0px" src="http://server.com/image.jpg" width=1600 height=1000 data-custom-title="test"> 当我将其扔进 jsbin 并尝试读取它的数据属性时有效，所以我真的无法理解为什么它不能在实时站点上使用相同的源代码！
恐怕唯一剩下的就是为 SO 的同胞创建一个小而有效（可重现）的场景。一点一点地修剪现场，直到你有一个最小的样本，然后把它贴在这里。否则我们将很难为您提供帮助。

标签： javascript jquery internet-explorer

【解决方案1】：

Uncaught TypeError: Object [object Object] has no method 'getAttribute'

因为$(this) 是一个jQuery 对象，而getAttribute() 需要一个DOM 元素。试试this

【讨论】：

嗨 elclanrs，知道为什么这只会出现在 IE7 中吗？那不会也出现在其他浏览器中吗？
@elclanrs 嗨，当我尝试它时，我得到的是 null 而不是 undefined。有没有办法将this 到$this 定义为DOM 元素？不幸的是 maximage 不会创建带有 ID 的元素。（虽然我想我可以编辑插件本身）
OK - 我修改了插件给每个 div 一个唯一的 ID。然后我在我的 jQuery 中有这个：var el = document.getElementById($(this).attr('id')); var newTitle = "<span>"+el.getAttribute('data-title')+"</span>";，它在除 IE 之外的所有其他浏览器中仍然可以完美运行。 IE 现在抛出错误'null' is null or not an object！ Argg IE，你为什么嘲讽我...作为参考，我遇到问题的页面是here
为了我的一生...我已经下载了一些 IE 调试工具，现在意识到 maximage 正在为不支持背景缩放的旧浏览器构建不同的循环。但是，我也对其进行了编辑以放入数据属性，并使用调试工具，我看到 $(this).html(); 是 <IMG style="MARGIN-TOP: -268px; WIDTH: 1359px; HEIGHT: 849px; MARGIN-LEFT: 0px" src="http://server.com/image.jpg" width=1600 height=1000 data-custom-title="test"> 但我仍然无法访问此数据属性（是的，我更改了自定义标题的名称）

【解决方案2】：

我遇到了类似的问题，将数据属性设置为一个按钮，然后他们在 JQuery 上检索它。我不断收到“Uncaught TypeError: Object [object Object] has no method 'getAttribute'”

我用以下方法解决了这个问题：

http://www.rqna.net/qna/kvtryn-jquery-ie7-variable-is-undefined-works-in-chrome-safari-firefox.html

当有：

<input type="button" class="btn" data-passengerMode="@item.PassengerMode"/>

这对我有用：

$('#btn_0').get(0).getAttribute('data-passengerMode')

或者这个

$('#btn_0')[0].getAttribute('data-passengerMode')

都是因为不想用html的方式：

document.getElementById('btn_0')

如果您可以尝试动态加载，希望对您有所帮助。

【讨论】：