Question

I have a page that has a menu and a content area. I dynamically load content into this area via ajax.

 <div id="content"  style="visibility: visible; overflow: hidden; top: 0px;"></div>

The ajax call looks like the following.

  $('#content').load('content/contactform.html',function(){ ...some code...}

The page that is loaded into the content box is a form that has a Button defined with an onClick method

<div>
    <h2>Phone Numbers</h2>
    <div id="form">
    </div>
    <button id="addPhoneBtn"  onclick="alert('click')">Click Me</button>
</div>

Normally it would add a new input field to allow the user to enter more phone numbers. But for testing it just prints an alert.

When I now click that button on a mobile device such as an IPad, the event is fired three times. I have read that on touch devices don’t have mouse events. They have touch events.

But the strange think is that if I copy that page directly into the content, the onClick event is only fired once. Am I missing something ?

Update: I’m using Iscroll to make the content that is inside the div scrollable.

Answer 1

I found the problem. I was using iscroll-4 to achieve the scrolling on touch devices.
Removing this library and switching to the dojo framework, solved this issue.