1

阅读了它并多次被“告知”使用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();
    };
});

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

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

我最初的on绑定看起来像这样：

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

但是在阅读了移动 Safari 中的一个错误之后，这里：

jQuery .on() 和 .delegate() 在 iPad 上不起作用

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

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

有人有什么想法吗？

编辑：

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

附加编辑：

我也尝试将点击事件绑定到headerRow元素，但遇到同样的问题

4

1 回答 1

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 自该错误以来一直在更新？

于 2013-02-02T12:38:46.980 回答