web-dev-qa-db-ja.com

JQueryクリックがiPadで機能しない

jquery blockUIを使用してポップアップを開き、何らかのアクションを実行するWebアプリケーションがあります。これはすべてSafariで正常に動作し、IE 8.問題はIpadにあります。ポップアップのアクションはいずれも応答しません。そのページに留まります。他に何かを追加する必要がありますか？ここに、ページを開いて閉じるイベントをクリックするコードを示します。

<script>
$(document).ready(function() {
  $.ajaxSetup( {
           cache:false
   });

        $("#sendInviteDiv").load("invite.htm?action=view&pid="+pid);
            $.blockUI({ message: $('#sendInviteDiv'),
                centerY: 0,
                    css: {
                top:  ($(window).height() - 550) /2 + 'px',
                        left: ($(window).width() - 870) /2 + 'px',
                        width: '870px'
                }
            });
            //var ua = navigator.userAgent;
            //var event = (ua.match(/iPad/i)) ? "touchstart" : "click";
            //alert(ua);

            $('#closeInvite').click($.unblockUI);

    $('#inviteBtn').click(function() {
//script to load 
       //setPositionDetails('${formName}','inviteBtn');

       });
}


});


</script>

ポインタに感謝します。

javaScriptがオンになり、iPad Safari設定でポップアップが許可されます。

jqueryipadsafari
39
Atchuta Vani

私は通常使用します

.bind("click touchstart", function(){

});

の代わりに：

.click(function(){

});

そうすれば、正しいイベントをバインドできます。また、何らかの理由でクリックよりもタッチの応答がはるかに速くなります。

83
Rich Bradshaw

私はこれがずっと前に尋ねられたことを知っていますが、この正確な質問を探している間に答えを見つけました。

2つの解決策があります。

Html要素に空のonlick属性を設定できます：

<div class="clickElement" onclick=""></div>

または、ポインタカーソルを設定してcssに追加できます。

.clickElement { cursor:pointer }

問題は、iPadで、非アンカー要素の最初のクリックがホバーとして登録されることです。これは、タブレット/モバイル向けに最適化されていないホバーメニューがあるサイトで役立つため、実際にはバグではありません。カーソルを設定するか、空のonclick属性を追加すると、要素が実際にクリック可能な領域であることをブラウザーに通知します。

（経由で http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working ）

36
lachie_h

更新：私は_.bind_を_.on_に切り替えました。これは、jQueryが言うように現在では推奨されている方法だからです。

JQuery 1.7以降、.on()メソッドは、イベントハンドラーをドキュメントにアタッチするための推奨メソッドです。 jquery.com

例：

_$('.button').on("click touchstart", function() {

});
_

以下は、clickおよびtouchstartイベントの最終バージョンです。これは、DOMのロード後に追加された新しいDOMオブジェクトでも発生するためです。この究極のクリックイベントソリューションをあらゆるシナリオに組み込みます。

_$(document).on("click touchstart", ".button", function () {

});
_
23
BBi7

代わりにbind関数を使用してください。より親しみやすくします。

例：

var clickHandler = "click";

if('ontouchstart' in document.documentElement){
    clickHandler = "touchstart";
}

$(".button").bind(clickHandler,function(){
    alert('Visible on touch and non-touch enabled devices');
});
7
Samson

以前のコメンターのおかげで、私は以下のすべてが私のために働いていることがわかりました

Onclickスタブを要素に追加するか、

onclick="void(0);"

またはユーザーのカーソルポインタースタイル

style="cursor:pointer;"

または私の既存のコードのようにjqueryコードが必要でしたtapが追加されました

$(document).on('click tap','.ciAddLike',function(event)
{
    alert('like added!'); // stopped working in ios safari until tap added
});

Apple興味のある人のためのドキュメントに相互参照を追加しています。 Apple Docs：Make Events Clickable

（ハイブリッドアプリがクリックの処理をいつ停止したのか正確にはわかりませんが、iOS 7以前で機能していたことを覚えているようです。）

2
Anthony De Souza

おそらく、イベントのクリックとタッチの両方を定義するのではなく、デバイスがクリックまたはタッチで動作するかどうかを調べるハンドラーを定義できます。

var handleClick= 'ontouchstart' in document.documentElement ? 'touchstart': 'click';
$(document).on(handleClick,'.button',function(){
alert('Click is now working with touch and click both');
});
1
Abhishek

ポップアップを作成するスパンがありました。 「click touchstart」を使用すると、タッチエンド中にポップアップの一部がトリガーされます。これを修正するには、スパンを「タッチエンドをクリック」します。

0
Luke Wenke

バインディングをより具体的にすると、iOSで動作するようになりました。私が持っていた：

$(document).on('click tap', 'span.clickable', function(e){ ... });

変更したとき：

$("div.content").on('click tap', 'span.clickable', function(e){ ... });

iOSが応答し始めました。

0
djbp

同様の問題があります。ユーザーがページをスクロールしていない限り、ボタンのクリックイベントは機能しません。バグはiOSでのみ表示されます。

ページを少しスクロールすることで解決しました。

$('#modal-window').animate({scrollTop:$("#next-page-button-anchor").offset().top}, 500);

（ただし、究極の原因には答えません。Safariモバイルの何らかのバグでしょうか？）

0
Eino Gourdin

賛成のソリューションはどれも私にとってはうまくいきませんでした。最終的に機能したのは次のとおりです。

ドキュメントの準備が必要でない場合は、$(document).ready outにあるコードを移動しました。ドキュメントに準備することが必須の場合、その重要なコードをjQuery(window).load()に移動します。

0
user1849091

実際、これはコード内のjavascriptの変更のカップルであることが判明しました。 ;を使用したjavascriptメソッドの呼び出し最後に。スクリプトタグを頭ではなく本文に配置します。興味深いことに、表示されているテキストを「クリック」してイベント以外のものに変更します。などを評価してください.

サファリでデバッガを有効にした場合、多くの情報やエラーさえも表示されませんでした。

0
Atchuta Vani