Проблемы с jQuery On, в частности с iPad

Question

Прочитав его и несколько раз «отключившись» для использования live, в отличие от on Я перемещаю весь свой код до on ... и с множеством проблем! !

Большая часть этого я преодолел, но сегодня у меня очень странная проблема.

У меня есть вопрос/ответ доска объявлений вещь, где заголовки сообщений отображаются, но содержимое загружается динамически при нажатии на заголовок, то HTML является

<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> 

Итак, мы имеем headerRow контейнер, в котором некоторые кнопки, чтобы закрыть или удалить поток сообщений, а затем span, содержащий информацию о сообщении, имя пользователя, тему электронной почты, а затем кнопку, чтобы нажать, чтобы открыть форму ответа.

Пролет с классом openCurrent имеет JQuery на связывание следующим образом:

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

Теперь, это прекрасно работает на моем компьютере, но ненадежно на IPad.

Это НЕКОТОРЫЕ РАБОТЫ, и я не могу понять какой-либо закономерности относительно того, почему и когда это будет работать.

я изначально имеют on привязки выглядеть следующим образом:

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

Но после прочтения об ошибке в мобильном Safari, здесь:

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

я изменил его к телу, но это не имело никакого отношения к поведению.

Я также заметил, что мобильный Safari не будет вызывать события click, если в этом случае элемент не имеет CSS cursor:pointer, у меня есть это уже на месте, поскольку оно имеет смысл визуально на графическом интерфейсе рабочего стола.

У кого-нибудь есть идеи?

EDIT:

Это не работает в Chrome на IPad тоже!

Дополнительные Edit:

Я также попытался связыванием события щелчка к headerRow элементу, но получить такую ​​же проблему

Answer 1

Направо ... ну, в случае, если это какая-либо помощь кому-либо в будущем, Я отвечу на свой вопрос.

Единственное, что я забыл поставить в этом вопросе был CSS на элементах, и это, кажется, селектор hover вызывает проблему

@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; 
    } 
} 

я имел нагрузку градиент CSS с переходами в соответствии с выше, теперь набрали его в

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

Остановить его от показа на iPad, он отлично работает.

Я попытался исключить только переходы первого, но не делал этого, пришлось отключить все Hover CSS

Я изменил on привязку к .headerRow тоже, и он все еще работает, возможно, Safari был обновление с этой ошибки?