jQuery on () не работает с мобильным Safari

Question

Я хочу переключить класс списков, динамически генерируемых с помощью jQuery $ .ajax ({...}), с файлом XML.Он отлично работает на рабочем столе с Safari и Chrome, но не с мобильным Safari.Делегирование и Live также не работают на мобильных устройствах.

Я использую jQuery 1.7.2 iPad (iOS 5.1) iPhone (iOS 5.0.1)Не используется jQuery mobile

. В документах jQuery рекомендуется использовать .on () вместо .live (), так как live устарела, начиная с 1.7

oringal html

<ul id="movies">
   /* empty */
</ul>

после динамической сборки

<ul id="movies">
    <li>Movie-1</li>
    <li>Movie-2</li>
    <li>Movie-3</li>
</ul>

Следующее работает на настольном Safari и Chrome, но не на мобильном Safari.

$(document).on('click', '#movies li', function() {
    $(this).toggleClass('selected');
});

Кажется, что cyrusv задавал аналогичный вопрос и сам отвечал на решение, но он этого не сделал.не достаточно подробно.https://stackoverflow.com/a/9538134/372567 Говорит:

add onclick = '' к элементу div.Не уверен, почему это сработало, но это сработало.-

Answer 1

Итак, просто подытожив все это, так как мне потребовались часы отладки / серфинга, прежде чем я приехал сюда:

Чтобы привязки событий сохранялись после вызовов Ajax, вам нужно привязать их к документу, а не кэлемент, например:

INSTEAD OF:

$('.foo').on('click', function() { ... }

ИСПОЛЬЗОВАНИЕ:

$( document ).on('click', '.foo', function () { ... }

НО эта привязка документа не будет работать в Safari для iOS для мобильных устройств, ЕСЛИ ВАС такжевключите onclick="" в HTML элемента.Странно, но это правда.

Answer 2

Не рекомендуется связывать события с элементом document, вместо этого следует сделать следующее:

$('#movies').on('click', 'li', function() {
    $(this).toggleClass('selected');
});

Answer 3

У меня была похожая проблема при использовании on (). Он работал на Chrome и Safari на рабочем столе, но не работал ни в одном мобильном браузере. Решение, как предложил cyrusv, заключалось в следующем:

JQuery:

$('#questions').on('click', 'li', function() {
    ....
});

Изменить HTML с:

<div id="questions"> 
  <li>...</li>
  <li>...</li>
</div> 

до:

<div id="questions"> 
  <li onclick=''>...</li>
  <li onclick=''>...</li>
</div> 

Answer 4

Еще два селектора ради опций:)

$("#movies li").on("click", function(){
    $(this).toggleClass('selected');
})

$("ul[id='movies'] li").on("click", function(){
    $(this).toggleClass('selected');
})

Answer 5

На самом деле хорошей практикой является делегирование вышестоящим элементам, либо документу, либо другим контейнерам. Однако при таргетинге на iOS вы должны учитывать следующее: выполнение делегирования событий в jQuery, например $(document).on('click', '.target-element', function (event) {...});, не будет работать . Вы должны добавить либо onclick="" к целевому элементу, либо cursor: pointer к его стилям.

Объяснение взято и адаптировано из http://gravitydept.com/blog/js-click-event-bubbling-on-ios:

Оказывается, что Safari на iPhone не поддерживает делегирование событий для событий щелчка, если только щелчок не происходит по ссылке или входу. К счастью, есть обходные пути.

Answer 6

$ (документ) .on также является проблемой в новых версиях настольного Safari (по крайней мере, 8.0.8).Safari также имеет проблему с вызовами Ajax POST, использующими только переменную и не указывающими имя и значение.Только указание переменной работает как в Chrome, так и в Firefox.

Не будет работать в Safari:

var id = 1;
$.ajax({
            type: "POST",
            url: "@Url.Action("AjaxAction")",
            data: {
                id
            }
        });

Работает во всех браузерах:

var id = 1;
$.ajax({
            type: "POST",
            url: "@Url.Action("AjaxAction")",
            data: {
                id:id
            }
        })

Answer 7

У меня была такая же проблема с on('change'). когда я добавил onchange='' в HTML, он работал.

Answer 8

Вы завернуты в JQ DocReady? $(function() { ... })

$(function() {
  $('#movies li').on('click', function() {
    $(this).toggleClass('selected');
  });
});