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>

当我点击链接从第1页导航到第2页时，我将内容附加到包含并非总是指定宽度/高度的图像的$（“＃mycontent”），然后我将应用iScroll-4我可以滚动/缩放内容 - 在某些情况下，我需要在加载后立即缩放它，以便它很好地适合移动屏幕（通常600px宽启动）。问题是，一旦图像加载，格式就会崩溃，特别是因为我需要重新定位元素，因为CSS缩放喜欢使缩放的项目居中，而不是与左上角对齐。

这可能是一个简单问题的长解释（也许有更好的方法来执行上述操作？），但这是我真正的问题：我正在尝试为div上的load事件添加事件侦听器，所以我可以检查一下所有图像加载后是否需要重新定位div：

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

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

疯狂的是，doSomething（） DOES 被解雇，但随后Safari抛出以下错误并导致JQuery崩溃：

TypeError：'undefined'不是一个函数（评估 '$（“＃mycontent”）。addEventListener（'load'，doSomething（），假）'）

该元素存在于DOM中，并且在添加事件侦听器时它肯定会被加载 - 我想这可以通过它触发它来清楚地表明。 JQM在元素转换时将一些样式应用于元素，但我不知道它会如何影响它。

任何帮助都会受到赞赏，因为我一直在反对这个问题，并准备写一些非常丑陋的循环黑客来检查尺寸变化：/

Answer 1

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

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

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

如果您收听每个图片的加载事件并调整布局，JQuery也可以使用load()：

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

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

Answer 2

您收到错误的原因是您正在使用JQuery并尝试绕过JQuery API添加事件。您不能使用addEventListener方法。使用$('#mycontent').load(handler)代替，其中handler是一个接受参数的函数。例如$('#mycontent').load(function (e) {alert ("loaded")})

导致TypeError的JQueryMobile addEventListener：undefined - 仍然在执行

2 个答案: