title: Touchstart works from second time on modal mobile
body: <p>Hey guys i am having a very weird issue in my mobile application development through phonegap as i am trying to make a modal which contains some images and i am doing a touchstart event on each image in this modal which leads to changing their border color if any of the image is tapped(touchstarted) bas there is a very weird thing that happens the touchstart is fired only after the 2nd time i touch the image and then works totally fine its fired with every touch after this 2nd touch but the very first touch isnt recognized as a touch at all !! It's doesn't even go into the eventlistener of the touchstart as i tried it using alert and it didn't enter the function at all .. And for your information if such images are put outside the modal everything just works perfectly and the touchstart event occurs from the first touch so is this something has to do with modals or something !???! Cause i really don't know whats the problem and its driving me crazy !! .... I will post my code now for the javascript changing the border color of the images and the html page..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("back").addEventListener('touchstart',function(){
   var x=document.getElementById("back");
   if(x.style.borderColor=="rgb(50, 50, 50)")
    {
     x.style.borderColor=y;
    }
   else {
    x.style.borderColor="#323232";
   }
  });
  document.getElementById("shoulder").addEventListener('touchstart',function(){
   var x=document.getElementById("shoulder");
   if(x.style.borderColor=="rgb(50, 50, 50)")
    {
     x.style.borderColor=y;
    }
   else {
    x.style.borderColor="#323232";
   }
  });
  document.getElementById("chest").addEventListener('touchstart',function(){
   var x=document.getElementById("chest");
   if(x.style.borderColor=="rgb(50, 50, 50)")
    {
     x.style.borderColor=y;
    }
   else {
    x.style.borderColor="#323232";
   }
  });
  document.getElementById("legs").addEventListener('touchstart',function(){
   var x=document.getElementById("legs");
   if(x.style.borderColor=="rgb(50, 50, 50)")
    {
     x.style.borderColor=y;
    }
   else {
    x.style.borderColor="#323232";
   }
  });
  document.getElementById("biceps").addEventListener('touchstart',function(){
   var x=document.getElementById("biceps");
   if(x.style.borderColor=="rgb(50, 50, 50)")
    {
     x.style.borderColor=y;
    }
   else {
    x.style.borderColor="#323232";
   }
  });
  document.getElementById("triceps").addEventListener('touchstart',function(){
   var x=document.getElementById("triceps");
   if(x.style.borderColor=="rgb(50, 50, 50)")
    {
     x.style.borderColor=y;
    }
   else {
    x.style.borderColor="#323232";
   }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block buttoncss"&gt;My Muscle!&lt;/button&gt;
  
  
  
  &lt;div class="modal fade active" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"&gt;
   &lt;div class="modal-body"&gt;
      &lt;!-- Start Muscles Choices --&gt;
      &lt;div class="top" style="background-color:#EEEEEE"&gt;
       &lt;ul&gt;
       &lt;li&gt;
       &lt;h4 style="color:#323232"&gt;What are you playing today ?&lt;/h4&gt;
       &lt;/li&gt;
       &lt;/ul&gt;
       &lt;div&gt;
       &lt;div class="container"&gt;
        &lt;div class="row"&gt;
      &lt;div class="col-xs-4"&gt;
      &lt;div&gt;
      &lt;img id="back" class="img-circle" src='img/back.png' /&gt;
       &lt;h5 style="color:#323232" class="text-center" style="color:white"&gt;Back&lt;/h5&gt;
      &lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="col-xs-4"&gt;
          &lt;div&gt;
              &lt;img id="shoulder"  class="img-circle" src="img/Shoulder.png" /&gt;
              &lt;h5 style="color:#323232" class="text-center" style="color:white"&gt;Shoulders&lt;/h5&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="col-xs-4"&gt;
          &lt;div&gt;
              &lt;img id="chest"  class="img-circle" src="img/BenchPress.png" /&gt;
              &lt;h5 style="color:#323232" class="text-center" style="color:white"&gt;Chest&lt;/h5&gt;
          &lt;/div&gt;
      &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    
    &lt;div style="background-color:#EEEEEE" &gt;
       &lt;div&gt;
       &lt;div class="container"&gt;
        &lt;div class="row"&gt;
      &lt;div class="col-xs-4"&gt;
      &lt;div&gt;
      &lt;img id="legs" class="img-circle" src='img/Legpress.png' /&gt;
       &lt;h5 style="color:#323232" class="text-center" style="color:white"&gt;Legs&lt;/h5&gt;
      &lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="col-xs-4"&gt;
          &lt;div&gt;
              &lt;img id="biceps"  class="img-circle" src="img/biceps.png" /&gt;
              &lt;h5 style="color:#323232" class="text-center" style="color:white"&gt;Biceps&lt;/h5&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="col-xs-4"&gt;
          &lt;div&gt;
              &lt;img id="triceps"  class="img-circle" src="img/triceps.png" /&gt;
              &lt;h5 style="color:#323232" class="text-center" style="color:white"&gt;Triceps&lt;/h5&gt;
          &lt;/div&gt;
      &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
    &lt;/div&gt;
      </code></pre>
  </div>
  </div>
  </p>