title: jquery show hide not working in mobile
body: <p>I'm designing a mobile friendly version of my site and everything seems to be working fine, but I can't click on the links inside the div that shows after click function shows that div.</p>
  
  <pre><code>$(document).ready(function() {
  
  document.addEventListener("touchstart", function() {},false);
  
  
  
  $("#business").click(function(){
      $(this).addClass('on');
      $("#business_open").show();
      $("#menu_open").hide();
  });
  
  $("#menu").click(function(){
      $(this).addClass('on');
      $("#menu_open").show();
      $("#business_open").hide();
  });
  
  });
  </code></pre>
  
  <p>Here is HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;&lt;/div&gt;
  
  &lt;div id="business"&gt;
    &lt;span&gt;Title&lt;/span&gt;
  &lt;/div&gt;
  
    &lt;div id="business_open"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="link1.html"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="link2.html"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
  &lt;div id="menu"&gt;
    &lt;em&gt;m&lt;/em&gt;
  &lt;/div&gt;
  
    &lt;div id="menu_open"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a class="selected" href="link1.html"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="link2.html"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>