web-dev-qa-db-ja.com

jQuery .on（）および.delegate（）がiPadで機能しない

このスニペットをデスクトップで試すと、すべてが機能します。
iPadで試してみると、何も起こりません。

_$('body').on('click', '#click', function() {
    alert("This alert won't work on iPad");
});_
_div { 
  font-size: 24px; 
}_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">Click here</div>_

単純な.click()ハンドラーは機能しますが、私が望むものではありません。同じことが.delegate();と.live()にも当てはまります

バグでしょうか。

javascriptjqueryipaddelegation
31
Martin.

これはSafariのモバイルバグ/機能です。クリックイベントが本体にまで達しません。

onclick=""を追加することは既知の回避策ですが、私見では、<body>の最初の子にリスナーをアタッチする方が簡単です。

参照： http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

34
mddw

IOSの本体のカーソルスタイルを「ポインター」に変更すると、すべてが完全に機能します。クリック可能にするすべての要素にonclick = ""を追加する必要はありません...

<script type="text/javascript">
    $(function() {
        // The trick
        if (/ip(hone|od)|ipad/i.test(navigator.userAgent)) {
           $("body").css ("cursor", "pointer");
        }
        // The test
        $("body").on("click", "#click", function() {
            alert("This also works on iOS !");
        });
    });
</script>
<div id="click">Click here</div>

私はあなたが今何を考えているか知っています： "WTF！"。

30
Boroboro

なぜうまくいかないのかはわかりませんが、おそらくバグですが、適切な回避策があります。簡単に言えば onclick=""委任しているdivに対して、完全に機能します

<div id="click" onclick="">Click here</div>
<script>
$("body").on("click", "#click", function() {
    alert("This works on iPad");
});
</script>

フィドル

12
Martin.

iOSにはカーソルスタイルがないとイベントバブリングなしがあります。
したがって、CSSでcursor: pointer;を要素に追加する必要があります。

$('body').on('click', '#click', function() {
    alert("This alert won't work on iPad");
});
#click { 
  font-size: 24px; 
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">Click here</div>

私はそれがずっと前に尋ねられたことを知っていますが、簡単なCSSソリューションが役立つかもしれないと思いました。

11
Simon Arnold

私は http://www.danwellman.co.uk/fixing-jquery-click-events-for-the-ipad/ で解決策を見つけました

次のアプローチを実行します。

var isIPad = function() {
    return (/ipad/i).test(navigator.userAgent);
};
var isIPhone = function() {
    return (/iphone/i).test(navigator.userAgent);
};
var isIPod = function() {
    return (/iPod/i).test(navigator.userAgent);
};

そして、あなたがクリックイベントハンドラをバインドする場所はそうします：

var eventName = (isIPod() || isIPad() || isIPhone()) ? "touchstart" : "click";
// if you are using jquery-mobile
eventName = (isIPod() || isIPad() || isIPhone()) ? "touchstart" : "vclick";

$(".selector").bind(eventName, function(e) {
    //do something here
});
// or
$(document).on(eventName, ".selector", function(e) {
    //do something here
});

それでおしまい。

3
algorhythm

IPhone 5C以下でこの問題に直面していました。
これは私にとってうまくいきました：

body {
  cursor:pointer;
}
0
Rakesh Yembaram

HTMLの本文の前に付けるメッセージに問題がありました。 [ jQuery 'click'イベントがiOS Safariで機能しない？ でこの問題を見つけました

これを使った

$('body').on('click touchstart', 'someselect', function(){})

そしてそれはiPhone 4SとiPhone 5Sで動作しました

0
Cosmin Cojocaru