jQuery .on() и .delegate() не работает на iPad

Если вы попробуете этот фрагмент на рабочем столе, все будет работать.
Всякий раз, когда вы пробуете его на iPad, он ничего не сделает.jQuery .on() и .delegate() не работает на 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()

Это ошибка?

источник

2012-04-15 Martin.

Вы используете JQuery мобильный? 'on' был добавлен в jquery 1.7.2 в ноябре 2011 года и пока не дошел до jquery mobile. –

@joeframbach, вы имеете в виду, что он был добавлен в jQuery 1.7 – Sparky

@joeframbach, я также не понимаю вашу точку зрения. jQuery Mobile не является автономным ... он требует jQuery; поэтому, если вы используете jQuery 1.7, у вас есть 'on()'. – Sparky

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

Добавление onclick="" является известным обходным решением, но ИМХО легче подключить слушателя к первому ребенку <body>.

См: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

источник

2012-04-15 19:55:43 mddw

+1, Да, любое решение, которое позволяет избежать встроенного JavaScript. – Sparky

THX для редактирования, я забыл о формировании. – mddw

ах, это тоже хороший ответ! Да, это может быть глобальное обходное решение! –

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

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

fiddle

источник

2012-04-15 19:09:36

[Это совершенно нормально, чтобы задать вопрос и ответить на него немедленно.] (Http://meta.stackexchange.com/questions/17845/etiquette-for-answering-your-own-question) Даже я это делал раньше. Если у вас есть какие-либо возражения, не стесняйтесь поднять его на мета; не увлекайте поток комментариев ответа. Благодарю. – BoltClock

Изменение курсора стиль тела КСН «указатель», и все будет отлично работать. Вам не нужно будет добавить 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».

источник

2012-08-29 13:33:58 Boroboro

Лучшее объяснение, которое я нашел для этого причудливого поведения, находится здесь (http://swsharinginfo.blogspot.in/2013/03/solution-for-click-event-issue-on-ipad.html). Таким образом, первое касание IPad/pod/phone рассматривается как зависание. Чтобы сообщить браузеру, что элемент кликабелен, вам нужно добавить курсор: указатель на элемент. Примечание 1. добавьте курсор: указатель к базовому элементу $ ('# myElement') не просто $ ('myElement: hover'). Примечание 2. Вы можете просто добавить ** курсор: указатель ** к вашему css **. Это сработало для меня! – dunxz

Вот что я думаю. – troelskn

Лучшее объяснение, которое я нашел для этого поведения: Apple не может кодировать s ** t. Эта неустойчивость по-прежнему сохраняется в Safari на iOS 9. –

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

это все.

источник

2012-10-05 14:38:13 algorhythm

Это имеет смысл без взлома! – TruMan1

Не можете ли вы объявить два события в том же on()? Итак, почему бы просто не сделать $ (document) .on («click touchstart», «class», function) –

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

источник

2014-11-13 20:57:32

Simon, вы рок! Это простое объяснение этого поведения и быстрое обходное решение. Вы спасли мой день. – 1234ru

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

body { 
    cursor:pointer; 
}

источник

2016-02-16 12:45:29

у меня была проблема с сообщением, что я вставляться в HTML тела. Я нашел этот вопрос на [jQuery 'click' event doesn't work on iOS Safari?

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

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

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

источник

2016-10-06 08:54:58

ответ

Смежные вопросы