Привязка событий в jQuery на содержимое, загруженное Ajax
Недавно пришлось поработать на 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!"); )); });
Всё просто и легко. Вывод можно сделать следуюший — нет лучше источника, чем официальная дока по библиотеке
- Февраль 2012 (1)
- Ноябрь 2011 (1)
- Сентябрь 2011 (3)
- Февраль 2011 (1)
- Сентябрь 2010 (1)
- Август 2010 (2)
- Май 2010 (3)


