сценарий AJAX «не видит» нагруженные элементы

Question

Я использую скрипт JQuery, который загружает содержимое, когда пользователь щелкает по различным ссылкам на странице:

$('.main-navigation a[href*=\''+window.location.hostname+'\'], .site-info a[href*=\''+window.location.hostname+'\'], .widget-area a[href*=\''+window.location.hostname+'\'], #breadcrumbs a, #smi-logo a').click(function(event) 

{ 
// Load content and play some animaion 
} 

Проблема заключается в том, некоторые ссылки (.widget-area a[href*=\''+window.location.hostname+'\'], #breadcrumbs a) которые должны быть нацелены на AJAX, на самом деле внутри загруженного содержимого, и сценарий не «видит» их (я думаю, потому что они не отображаются в HTML-источнике страницы).

Как получить доступ к ссылкам, которые находятся внутри загруженного содержимого?

Answer 1

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

Так что, если бы это было DIV с идентификатором, скажем, foo, вы могли бы сделать это:

var hostName = window.location.hostname; 
$('#foo').on('click', 'a[href*=\''+ hostName +'\'], #breadcrumbs a', function(){ 
    //your code here 
});