Databases
StackOverflow2013
Postsdbo
POiOS Touch event passes through on DOM insertion
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POiOS Touch event passes through on DOM insertion
    text
    copied!<p>In mobile safari on the iPad and in an iOS UIWebView I am seeing the following behavior.</p> <p>I have a page that replaces the contents of a DOM element using javascript. The first page has a button that when pressed will remove all the elements from a container element and a new set of html will be inserted into the container.</p> <p>The problem is that when the button is pressed and the html is switched out the touch event passes through to the newly inserted html page. In my case we have a text input on the 2nd page in the same position as the button on the 1st page. So, when the button is pressed the touch event passes through and puts focus on the text input and the soft keyboard comes up.</p> <p>Do anyone have an details on why this happens or how I can prevent this or any workarounds for this problem?</p> <p>View the link below on an iPad and you will see what I am talking about. It doesn't seem to happen on the "click" event, but both "touchstart" and "touchstop" makes this happen.</p> <p><a href="http://jsfiddle.net/tcollins/BtmyD/embedded/result/" rel="nofollow">http://jsfiddle.net/tcollins/BtmyD/embedded/result/</a></p> <p>HTML</p> <pre><code>&lt;h3&gt;Touch Start&lt;/h3&gt; &lt;div id="container2"&gt; &lt;button id="theButton2"&gt;Press Me&lt;/button&gt; &lt;/div&gt; </code></pre> <p>JAVASCRIPT</p> <pre><code>$('#theButton2').bind('touchstart', function(){ var html = '&lt;input type="text"&gt;'; $('#container2').empty().append(html); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload