Событие щелчка не работает с загруженным контентом Ajax

Я загружаю контент с помощью ajax из внешних файлов HTML. Не знаю, почему после загрузки контента событие click не работает в сафари (в том числе и в мобильном сафари) ни на одном из вновь загруженных элементов (ul, li, изображения и т. Д.). Однако это работает в Mozilla.

Я не могу понять, в чем именно заключается причина этого. Пожалуйста, посоветуйте мне решение. Ниже приведен код для справки.

Примечание: я использую приведенный ниже код в функции готовности jquery. Является ли jquery причиной проблемы?

var currentBottle = this.title; var request = createRequest (); if (request == null) {alert («Невозможно создать запрос»); возвращение; } request.onreadystatechange = showContent; request.open ("ПОЛУЧИТЬ", currentBottle + ".html", истина); request.send (ноль);

функция showContent () {если (request.readyState == 4) {if (request.status == 200) {document.getElementById ("food_scroller"). innerHTML = request.responseText; }}}


javascript jquery ajax safari mobile-safari
person user504023    schedule 27.11.2010    source источник
comment
Это дубликат? stackoverflow.com/ questions / 16598213 /   -  person Nikkorian    schedule 11.04.2017

Ответы (3)


arrow_upward
3
arrow_downward

В Safari тип содержимого иногда может иметь значение, убедитесь, что тип ответа установлен как text/html. Также в вашем загруженном AJAX контенте вы должны стараться не иметь тегов <script>. Я не думаю, что Safari иногда их уважает.

Возможно, попробуйте использовать jQuery $.load() для ПОЛУЧЕНИЯ кросс-браузерной совместимости с HTML-контентом (приведенный ниже эквивалент ваших функций createRequest и showContent):

var currentBottle = this.title;
$.load(currentBottle + ".html",
    function(responseText,textStatus,XMLHttpRequest){
        $("#food_scroller").html(responseText);
        //bind you on click events here
        $("#food_scroller").find("ul, li, images").click(myClickFunction);
  }
);
person Steven    schedule 27.11.2010
comment
+1 Ваш загруженный контент не должен содержать <script>. Поместите эти прослушиватели событий на исходную страницу с помощью $.live(). - person timdream; 27.11.2010
comment
Спасибо, timdream, я не был уверен, но достаточно уверен. Я запомню тег <script>. И $.live() - гораздо лучший ответ. - person Steven; 27.11.2010
comment
Спасибо за предложение, однако я не включаю скрипт с загруженным контентом. Чтобы все было яснее. - person user504023; 27.11.2010
comment
в мобильном сафари jquery evernts работает очень медленно, я не могу их использовать. И я не включаю ни одного скрипта с загруженным контентом. Я просто загружаю неупорядоченный список с внешней страницы. Чтобы все было яснее. Я вызываю вышеупомянутый код в событии щелчка. На самом деле, в соответствии с функциональностью, у меня есть миниатюры изображений вверху и внизу, поэтому есть еще один набор изображений (длинная прокручиваемая строка), когда когда-либо пользователь нажимает на изображения выше миниатюр, новый набор изображений должен появляться внизу, заменяя предыдущие изображения. - person user504023; 27.11.2010
comment
До сих пор все в порядке, но событие click не работает с этими вновь загруженными изображениями. Есть ли другая альтернатива, кроме живого выступления? - person user504023; 27.11.2010
comment
Также я не хочу использовать события jquery из-за проблем с производительностью в мобильном сафари. - person user504023; 27.11.2010
comment
Mobile Safari ... хорошо, сегодня я многому научился. Так прикреплены ли ваши события к тегу через атрибут <img onclick ../>? Попробуйте изучить window.addEventListener и object.attachEvent - person Steven; 27.11.2010
comment
Начиная с jQuery 1.7, метод .live () устарел. Используйте .on () для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate () вместо .live (). - person Nikkorian; 11.04.2017

arrow_upward
11
arrow_downward

Привязка событий прерывается, когда содержимое страницы загружается через ajax. Вам необходимо снова связать события в документе, используя следующую процедуру.

сделай это

$(document).on('click', '.classname' ,function (e) {
    // write your logic
});

вместо того

$('.classname').on('click' ,function (e) {
    // write your logic
});
person Umar Raza    schedule 24.12.2019
comment
Спасибо. Это было полезно - person Ahmad Vaqas Khan; 15.10.2020

arrow_upward
0
arrow_downward

Я сам прошел через эту проблему. Недавно загруженный html через Ajax необходимо подключить к обработчикам событий, даже если они заменяют существующие элементы DOM. Для этого вы должны включить в свой результат AJAX, чтобы установить обработчик для всех чувствительных к событиям элементов, которые отображаются.

Так, например, если ваш вызов AJAX возвращает

$ajaxresult = '<button class="bookbtn" id="bookbtn" type="button" >Book</button>';

Вам нужно добавить

$ajaxresult .= '<script>$("#bookbtn").on("click",function(){doit($(this))});</script>'."\n";

Однако, исследуя эту проблему только что, я прочитал следующее в http://api.jquery.com/on/:

Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать в то время, когда ваш код вызывает .on (). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, поместите сценарии после элементов в разметке HTML или выполните привязку событий внутри обработчика готовности документа. В качестве альтернативы можно использовать делегированные события для присоединения обработчиков событий.

Преимущество делегированных событий в том, что они могут обрабатывать события от дочерних элементов, которые добавляются в документ позже. Выбирая элемент, который гарантированно присутствует во время присоединения делегированного обработчика событий, вы можете использовать делегированные события, чтобы избежать необходимости часто присоединять и удалять обработчики событий. Этот элемент может быть контейнерным элементом представления в проекте модель-представление-контроллер, например, или документом, если обработчик событий хочет отслеживать все восходящие события в документе. Элемент документа доступен в заголовке документа перед загрузкой любого другого HTML, поэтому можно безопасно прикреплять туда события, не дожидаясь готовности документа.

В дополнение к их способности обрабатывать события на дочерних элементах, которые еще не созданы, еще одним преимуществом делегированных событий является их потенциал для гораздо меньших накладных расходов, когда необходимо отслеживать многие элементы. В таблице данных с 1000 строками в теле этот пример присоединяет обработчик к 1000 элементам: ...

person Nikkorian    schedule 11.04.2017