点击时事件在 iPad/iPhone/Android 上不适用于动态构建的元素

Question

这就是我构建 DOM 的方式：

var projectOverlay = document.createElement("div");
projectOverlay.className = "projectOverlay";
projectOverlay.onclick = function(){openSlider($(this))};   
project.appendChild(projectOverlay);

所以。。。 openslider(elem)功能在所有浏览器中都可以正常工作，除了移动设备（Android手机，iPhone，iPad等）。有没有其他方法可以将事件绑定到尚未创建的元素，或者我在这里做错了什么？

实时示例 - 单击联系人以获取项目，然后尝试单击其中一个项目以展开它。单击"关于"将带您返回主页。这仍然很混乱，但网站仍处于早期开发阶段......

Answer 1

某些手机和浏览器在 JavaScript 中没有实现"onclick"事件。您应该使用对触摸更友好的事件，例如"touchstart"，"touchmove"和"touchend"。

更多信息在这里： https://developer.mozilla.org/en-US/docs/DOM/Touch_events

Answer 2

在我的项目中遇到了同样的问题。动态创建的元素没有获取点击事件，除了在 iOS6 上（所以那里可能已经修复了一些问题）。我发现的解决方法是在包含动态创建的元素的div 上强制转换。加载页面时，包含我动态创建的元素的div 确实存在。假设它有一个值为"container"的id属性，代码将如下所示

var container = document.getElementById("container");
container.style.webkitTransitionDuration = "0";
container.style.webkitTransform = "translateY(0px)";

然后，容器下动态创建的元素将获得点击事件。

Answer 3

尝试将单击事件绑定移动到 appendChild 之后