On click event doesn't work on iPad/iPhone/Android on dynamically built elements

Question

This is how I build the DOM:

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

So... openslider(elem) function works perfectly fine in all browsers except on mobile devices (Android phones, iPhone, iPad etc...) . Is there any other way to bind events to the yet created element or I am doing something wrong here?

Live example - click on contact to get projects and then try to click on one of the projects to expand it. Click on About will get you back to the home page. That's still messy, but the web site is still in early development stage...

Answer 1

Some phones and browsers do not implement the "onclick" event in JavaScript. You should to work with the more touch friendly events, such as "touchstart", "touchmove" and "touchend".

More info here: https://developer.mozilla.org/en-US/docs/DOM/Touch_events

Answer 2

Got the same issue in my project. The dynamically created elements were not getting the click events, except on iOS6 (so something might have been fixed there). The work around I have found is to force a transform on the div that contains the dynamically created elements. The div that contains my dynamically created elements did exist when the page loaded. Assuming it has an id attribute with the value "container", the code would be as follows

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

Then the dynamically created elements under the container were getting click events.

Answer 3

尝试在appendChild之后移动click事件绑定