JQueryMobile addEventListener导致TypeError:未定义但仍在执行

Question

我在JQueryMobile开发中使用了一个非常标准的“一页”模型，如：

<div id="page1" data-role="page">Lorem Ipsum</div>
<div id="page2" data-role="page">
    <div id="mycontent" data-role="content"></div>
</div>

当我单击一个从page1导航到page2的链接时，我会将内容附加到$("#mycontent")中，其中包含的图像并不总是具有指定的宽度/高度，然后我将iScroll-4应用于滚动/缩放内容--在某些情况下，我需要在加载它时将其缩放，这样它就很适合移动屏幕(通常600 to宽开始)。问题是，一旦加载图像，格式就会分崩离析，特别是因为我需要重新定位元素，因为CSS缩放喜欢对缩放的项，而不是对齐到上/左上角。

对于一个简单的问题，这可能是一个很长的解释(也许有更好的方法来完成上面的操作？)，但这是我真正的问题:我试图为div上的load事件添加一个事件侦听器，这样我就可以检查是否需要在加载所有图像之后重新定位div：

$("#mycontent").addEventListener('load', doSomething(), false);

function doSomething(){  alert("something");  }

最疯狂的是，doSomething() 确实会触发，但随后Safari抛出以下错误并使JQuery崩溃：

TypeError:未定义的函数不是一个函数(计算'$("#mycontent").addEventListener('load'，doSomething()，false)')

元素存在于DOM中，并且在添加事件侦听器时它肯定是加载的--我猜这是通过它触发的事实清楚地显示出来的。在元素转换过程中，JQM应用了一些样式，但我不认为这会对其产生什么影响。

任何帮助都将不胜感激，因为我已经把头撞在这上面一段时间了，我要写一些非常难看的循环黑客来检查大小的变化:/

Answer 1

有两个可能的问题。addEventListener的第二个参数应该是函数，而不是函数调用：element.addEventListener("load", doSomething, false);。在您的代码中，无论事件名是什么，都会执行doSomething()。

此外，$('#mycontent')返回一个元素数组，我认为这些元素会导致您的TypeError，因此您可能需要使用：

var mycontent = document.getElementById('mycontent');
mycontent.addEventListener("load", doSomething, false);

如果您监听每个图像的load事件并调整布局，JQuery也有可能工作的负载()：

$('#mycontent img').load(doSomething);

这将为每个映像触发一次，因此如果您知道图像的数量，您可能希望保持计数，或者在每次加载并在超时调用doSomething之后创建/重置超时。

Answer 2

获得错误的原因是您正在使用JQuery并试图绕过JQuery API添加事件。您不能使用addEventListener方法。而是使用$('#mycontent').load(handler)，其中处理程序是接受参数的函数。例如$('#mycontent').load(function (e) {alert ("loaded")})