Событие Click не работает с Ajax-контентом - PullRequest
Новая
       16

Событие Click не работает с Ajax-контентом

0 голосов
/ 27 ноября 2010

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

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

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

var currentBottle = this.title;var request = createRequest ();if (request == null) {alert ("Невозможно создать запрос");вернуть;} request.onreadystatechange = showContent;request.open ("GET", currentBottle + ".html", true);request.send (null);

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

Ответы [ 2 ]

2 голосов
/ 27 ноября 2010

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

Возможно, попробуйте использовать $.load() в jQuery для получения кросс-браузерного контента 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);
  }
);
0 голосов
/ 11 апреля 2017

Я сам прошел через эту проблему. Вновь загруженный 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/:

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

Делегированные события имеют то преимущество, что они могут обрабатывать события из элементы-потомки, которые добавляются в документ позднее. От выбрать элемент, который гарантированно будет присутствовать во время делегированный обработчик событий прикреплен, вы можете использовать делегированные события для Избегайте необходимости часто подключать и удалять обработчики событий. это элемент может быть контейнерным элементом представления в Дизайн Model-View-Controller, например, или документ, если событие Обработчик хочет отслеживать все всплывающие события в документе. элемент документа доступен в заголовке документа до загружая любой другой HTML-код, поэтому безопасно прикреплять туда события без в ожидании готовности документа.

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

...