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()

Это ошибка или что-то?

Источник

7 ответов

Решение

Это мобильная ошибка / функция Safari: события щелчка не будут всплывать до самого тела.

Добавление onclick="" это известный обходной путь, но имхо проще прикрепить слушателя к первому потомку <body>,

Смотрите: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

Источник

Измените стиль курсора на 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!"

Источник

На 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 может помочь.

Источник

Я не уверен, почему это не работает, это, вероятно, ошибка, но есть хороший обходной путь. Проще говоря onclick="" на div вы делегируете, и это будет работать отлично

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

играть на скрипке

Источник

Я нашел решение на 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);
};

и где вы привязываете обработчик события click, сделайте так:

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
});

вот и все.

Источник

У меня была проблема с сообщением, которое я добавляю в тело HTML. Я обнаружил, что эта проблема в [ jQuery 'click' event не работает на iOS Safari?

Я использовал это

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

И это работало на iPhone 4S и iPhone 5S

Источник

Я столкнулся с этой проблемой на iPhone 5C и ниже.
Это сработало для меня:

body {
  cursor:pointer;
}
Источник
Другие вопросы по тегам