Привязка событий в jQuery на содержимое, загруженное Ajax

13 Август 2010   //   Автор: Arthur   //   jQuery  //  Комментарии (0)

Недавно пришлось поработать на jQuery c Ajax. После подгрузки содержимого методом load() в какой-нибудь слой, не срабатывают события для подгруженного содержимого.  Проблема была в том, что я определял события в $(document).ready() и, собственно, контента, на который я вешал event-ы, ещё «не было в природе, как такогово». Лечится эта беда довольно просто. Нужно «поймать» событие завершения асинхронной загрузки контента и тогда уже определять свои event-ы. Поскольку используется jQuery, «ловить» руками ничего не прийдется,  всё намного проще. Если заглянуть в доку по jQuery, а, именно, по интересующему методу .load(), то можно увидеть следующее:

.load(
  url,
  [ data ],
  [ complete(responseText, textStatus, XMLHttpRequest) ]
)

И описание:

url - A string containing the URL to which the request is sent.
 
data - A map or string that is sent to the server with
the request.
 
complete(responseText, textStatus, XMLHttpRequest) -
A callback function that is executed when the request completes.

Нас интересует callback, который вызывается после подгрузки контента. Допустим, у нас есть слой c идентификатором my_div, в который мы скриптом ajax_load.php подгрузим слой с идентификатором loaded_div, и, на клик  loaded_div повесим alert(«Event binding works! jQuery rocks!»). :

$("#my_div").load("ajax_load.php", function()
{
  $("#loaded_div").click(function(
    alert("Event binding works! jQuery rocks!");
  ));
});

Всё просто и легко. Вывод можно сделать следуюший — нет лучше источника, чем официальная дока по библиотеке :)

Оставить комментарий

Рубрики
Статистика