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 に答える