Problems with jQuery On, specifically with iPad

Question

Having read up on it and having been "told off" several times for using live as opposed to on I am moving all my code over to on... and having loads of trouble!!

Most of it I have overcome, but today I have a very strange issue.

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

<div class="headerRow" id="header_<%# Eval("headerId")%>">
    <span class="delete" id="delete_<%# Eval("msgId")%>"></span>
    <span class="markClosed" id="close_<%# Eval("headerId")%>"></span>

    <span id="view_<%# Eval("msgId")%>" class="openCurrent">                                       
        <span class="customerData userCol">
            <span class="qName"><%# Eval("customerName")%></span>
            <span class="qEmail">(<%# Eval("email")%>)</span>                           
        </span>    
        <span class="subjectCol"><%# Eval("subject")%></span>                             
        <span class="timeCol"><%# Eval("dateTime")%></span> 
    </span>

    <span class="reply" id="reply_<%# Eval("msgId")%>"> Reply </span>
</div>

So we have a headerRow container, within which are some buttons to close or delete the message thread, and then a span containing the details of the message, user name, email subject, and then a button to press to opena reply form.

The span with class openCurrent has a jQuery on binding as follows:

$('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();
    };
});

Now, this works perfectly on my PC, but is unreliable on an iPad.

It SOMETIMES works, and I can't figure out any pattern as to why/when it will work.

I did initially have the on bind look like this:

$('.headerRow').on('click', '.openCurrent', function (e).....

But after reading about a bug in mobile Safari, here:

jQuery .on() and .delegate() doesn't work on iPad

I changed it to the body, but it made no difference to behaviour.

I've also noticed previously that mobile Safari won't trigger click events unless the element has CSS cursor:pointer in this case, I have that already in place as it makes sense visually on the desktop GUI.

Anyone got any ideas?

EDIT:

It doesn't work in Chrome on iPad either!

Additional Edit:

I have also tried binding the click event to the headerRow element, but get the same problem

Answer 1

Right... well, in case this of any help to anyone in future, I will answer my own question.

The one thing I forgot to put in the question was the CSS on the elements, and it appears to be the hover selector causing the problem

@media only screen and (min-device-width: 800px) {
  /* Hover only on PC, disabled for iPad */
    .headerRow:hover {box-shadow:2px 2px 2px #666;background: #c0c0c0;
        background: -moz-linear-gradient(top,  #c0c0c0 1%, #f0f0f0 41%, #f0f0f0 55%, #c0c0c0 100%); 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#c0c0c0), color-stop(41%,#f0f0f0), color-stop(55%,#f0f0f0), color-stop(100%,#c0c0c0)); 
        background: -webkit-linear-gradient(top,  #c0c0c0 1%,#f0f0f0 41%,#f0f0f0 55%,#c0c0c0 100%);
        background: -o-linear-gradient(top,  #c0c0c0 1%,#f0f0f0 41%,#f0f0f0 55%,#c0c0c0 100%); 
        background: -ms-linear-gradient(top,  #c0c0c0 1%,#f0f0f0 41%,#f0f0f0 55%,#c0c0c0 100%); 
        background: linear-gradient(to bottom,  #c0c0c0 1%,#f0f0f0 41%,#f0f0f0 55%,#c0c0c0 100%);    
        -webkit-transition: all 0.2s;  -moz-transition:    all 0.2s;  -ms-transition:     all 0.2s;  -o-transition:      all 0.2s;
    }
}

I had a load of gradient CSS with transitions as per the above, now having wrpped it in

@media only screen and (min-device-width: 800px) {}

Stopping it from showing on the iPad it works fine.

I tried excluding just the transitions first, but that didn't do it, had to disable the entire hover CSS

I have changed the on bind to .headerRow too and it still works, perhaps as Safari has been updating since that bug?