загрузка HTML-фрагментов с помощью jQuery

Question

Я очень новичок в jQuery, Ajax и подобных вещах. Я нашел решения о том, как внедрить фрагменты HTML в мой сайт:

 $(document).ready(function(){  
     $('a').click(openContent); //binding all anchors to this function
 });

function openContent(){ 
 var path = $(this).attr('href');
 $('#content').load(path); 

 return false; //to prevent browser from loading the single HTML fragment
}

Это действительно хорошо работает! Проблема в том, что эти функции не будут выполняться при нажатии на якоря, расположенные в новом фрагменте HTML, которые были введены прямо ранее. Таким образом, фрагмент не будет вставлен в div, браузер будет загружать фрагмент только для себя.

Надеюсь, есть решения, которые не так сложно ... спасибо

---

UPDATE:
Хорошо, живи хорошо, НО,

в этих фрагментах также есть изображения, подключенные к плагину лайтбокса jQuery (издание Balupton) с rel = "lightbox-tour". Они отображаются в новом окне вместо lightbox-div. Есть предложения?

Answer 1

используйте live, это свяжет его с каждым добавляемым якорем:

$('a').live('click',openContent);

Answer 2

Также в jQuery 1.4+ вы можете использовать
$(document).delegate('a', 'click', openContent);

* Основное различие между live и делегатом, live прикрепляет события к документу и обрабатывает события, когда они всплывают. С делегатом вы можете указать контекст, в котором нужно прикрепить событие. Пример здесь точно такой же, как при использовании live. Теперь давайте скажем, что вы хотели, чтобы только якоря, которые появились в div с идентификатором «contentArea», загружали контент в этом поместье. В этом случае вы должны написать $("#contentArea").delegate('a', 'click', openContent);.

Подробнее о различиях между живым и делегатом. Совет. Разница между живым () и Делегатом ()

Answer 3

То есть лайтбокс не обрабатывает динамически загружаемые ссылки? Вы можете обновить свой код, чтобы перезапустить плагин лайтбокса в обратном вызове загрузки. Примерно так:

$(document).ready(function(){  
    $('a').live('click', openContent);
});

function openContent(){ 
    var path = $(this).attr('href'),
        content = $('#content');

    // added callback here
    content.load(path, function () {
        content.lightbox();
    }); 

    return false; 
}