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 类的 span 有一个 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();
    };
});

现在，这在我的 PC 上完美运行，但在 iPad 上不可靠。

它有时会起作用，但我无法弄清楚它为什么/何时起作用。

我最初确实将on 绑定看起来像这样：

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

但在阅读了移动版 Safari 中的一个错误后，请点击此处：

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

我将其更改为身体，但对行为没有影响。

我之前也注意到，除非元素具有 CSS cursor:pointer，否则移动版 Safari 不会触发 click 事件，在这种情况下，我已经有了它，因为它在桌面 GUI 上具有视觉意义。

有人有什么想法吗？

编辑：

它在 iPad 上的 Chrome 中也不起作用！

附加编辑：

我也尝试将点击事件绑定到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 上显示它工作正常。

我尝试先排除过渡，但没有这样做，必须禁用整个悬停 CSS

我也将on 绑定更改为.headerRow，但它仍然有效，也许是因为 Safari 自该错误以来一直在更新？