title: How to replace click with touchstart on iOS devices
body: <p><strong>Objective</strong></p>
  
  <p>To close the parent div of an anchor tag when clicked. In the code below, I want to hide div <strong>performance_tt</strong> when the user clicks on anchor tag <strong>close_performance_tt</strong>.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>Unable to get it to work on iOS devices after spending several hours at it. Works fine on everything else, even a BlackBerry 10 device. </p>
  
  <pre><code>&lt;div id="performance_tt" style="display: none;width: 300px;height: 200;overflow: auto;padding: 5px;background-color: yellow;"&gt;
      &lt;div&gt;Website performance has become an important consideration for most sites.
      The speed of a website affects usage and user satisfaction, as well as search engine rankings, a factor that directly correlates to revenue and retention.
      As a result, creating a system that is optimized for fast responses and low latency is key.&lt;/div&gt;
      &lt;a id="close_performance_tt" href="#"&gt;Close&lt;/a&gt;
      &lt;script&gt;
      var userAgent = navigator.userAgent.toLowerCase();
      var isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
      if (isiOS) {
          $("#close_performance_tt").bind('touchstart', function() {
              alert('Touch-start event triggered');
          });
      } else {
          $("#close_performance_tt").bind('click', function() {
              alert('Click event triggered');
          });
      }
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>