点击事件在 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 等...）之外的所有浏览器中都能正常工作。有没有其他方法可以将事件绑定到尚未创建的元素，或者我在这里做错了什么？

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

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 之后移动 click 事件绑定