title: iOS Touch event passes through on DOM insertion
body: <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>