title: Problems with jQuery On, specifically with iPad
body: <p>Having read up on it and having been "told off" several times for using <code>live</code> as opposed to <code>on</code> I am moving all my code over to <code>on</code>... and having loads of trouble!!</p>
  
  <p>Most of it I have overcome, but today I have a very strange issue.</p>
  
  <p>I have a question/answer bulletin board thing where the message headers are shown but content is loaded dynamically when clicking a header, the HTML is </p>
  
  <pre><code>&lt;div class="headerRow" id="header_&lt;%# Eval("headerId")%&gt;"&gt;
      &lt;span class="delete" id="delete_&lt;%# Eval("msgId")%&gt;"&gt;&lt;/span&gt;
      &lt;span class="markClosed" id="close_&lt;%# Eval("headerId")%&gt;"&gt;&lt;/span&gt;
  
      &lt;span id="view_&lt;%# Eval("msgId")%&gt;" class="openCurrent"&gt;                                       
          &lt;span class="customerData userCol"&gt;
              &lt;span class="qName"&gt;&lt;%# Eval("customerName")%&gt;&lt;/span&gt;
              &lt;span class="qEmail"&gt;(&lt;%# Eval("email")%&gt;)&lt;/span&gt;                           
          &lt;/span&gt;    
          &lt;span class="subjectCol"&gt;&lt;%# Eval("subject")%&gt;&lt;/span&gt;                             
          &lt;span class="timeCol"&gt;&lt;%# Eval("dateTime")%&gt;&lt;/span&gt; 
      &lt;/span&gt;
  
      &lt;span class="reply" id="reply_&lt;%# Eval("msgId")%&gt;"&gt; Reply &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So we have a <code>headerRow</code> container, within which are some buttons to close or delete the message thread, and then a <code>span</code> containing the details of the message, user name, email subject, and then a button to press to opena  reply form.</p>
  
  <p>The span with class <code>openCurrent</code> has a jQuery on binding as follows:</p>
  
  <pre><code>$('body').on('click', '.openCurrent', function (e) {
      var msgid = extractNumbers($(this).attr('id')); // sub function to pull the message ID from the element ID
      if ($('#content_' + msgid).html() == '') {
          $(but).addClass('centreLoader');
          getMsgContent(msgid, 'absolute', function (result) {
              // getMsgContent is an AJAX call returning the message
              $('#content_' + msgid).html(result).slideToggle();
          });
      } else {
          $('#content_' + msgid).slideToggle();
      };
  });
  </code></pre>
  
  <p>Now, this works perfectly on my PC, but is unreliable on an iPad.</p>
  
  <p>It SOMETIMES works, and I can't figure out any pattern as to why/when it will work.</p>
  
  <p>I did initially have the <code>on</code> bind look like this:</p>
  
  <pre><code>$('.headerRow').on('click', '.openCurrent', function (e).....
  </code></pre>
  
  <p>But after reading about a bug in mobile Safari, here:</p>
  
  <p><a href="https://stackoverflow.com/questions/10165141/jquery-on-and-delegate-doesnt-work-on-ipad">jQuery .on() and .delegate() doesn&#39;t work on iPad</a></p>
  
  <p>I changed it to the body, but it made no difference to behaviour.</p>
  
  <p>I've also noticed previously that mobile Safari won't trigger <code>click</code> events unless the element has CSS <code>cursor:pointer</code> in this case, I have that already in place as it makes sense visually on the desktop GUI.</p>
  
  <p>Anyone got any ideas?</p>
  
  <p>EDIT:</p>
  
  <p>It doesn't work in Chrome on iPad either!</p>
  
  <p>Additional Edit:</p>
  
  <p>I have also tried binding the click event to the <code>headerRow</code> element, but get the same problem</p>