Динамическая загрузка HTML с помощью jQuery

Question

У меня возникла небольшая проблема с этим сайтом, который я сейчас создаю, я использую .load () jQuery, чтобы получить HTML-файл и включить его в #content моего сайта

<a href="#" onclick="$('#content').load('port/1.html')">1</a>

Кусок кода, который извлекается, имеет функцию щелчка jQuery для нескольких миниатюр.

<div id="bigImg"><img src="images/1large.jpg" alt="Large View" id="lrg" /></div>
<div id="thumbCont">
<div class="thumb first"><img src="images/thumb1.jpg" alt="Thumbnail 1" data-lrg="images/1large.jpg" class="th"></div>
<div class="thumb"><img src="images/thumb2.jpg" alt="Thumbnail 2" data-lrg="images/2large.jpg" class="th"></div>
<div class="thumb"><img src="images/thumb3.jpg" alt="Thumbnail 3" data-lrg="images/3large.jpg" class="th"></div>
<div class="thumb"><img src="images/thumb4.jpg" alt="Thumbnail 5" data-lrg="images/4large.jpg" class="th"></div>
<div class="thumb last"><img src="images/thumb5.jpg" alt="Thumbnail 5" data-lrg="images/5large.jpg" class="th"></div>
</div>

и вот jQuery для обмена изображениями ..

$(document).ready(function() {
    $('img.th').click(function(){
        lrg = $(this).attr('data-lrg');
        olrg = $('#lrg');
        if (lrg != olrg.attr('src')) {
            olrg.fadeOut('normal',function(){olrg.attr('src',lrg)});
            olrg.fadeIn();
        }
    });
});

Поэтому, когда пользователь нажимает на изображение, jquery извлекает новое изображение src из data-lrg. Эта функция прекрасно работает, пока я не решил использовать HTML с помощью jquery вместо php.

Есть идеи, почему jQuery не распознает новый html?

Мои мысли: Я предполагаю, что это как-то связано с настройкой магазина jQuery до загрузки этой части страницы, что говорит мне, что мне нужно найти способ сказать jQuery, чтобы он снова посмотрел на этот раздел или на всю страницу опять же ... но я не знаю, как это сделать.

(я знаю, что onclick - не лучший способ сделать это, но он облегчает раннюю разработку)

Answer 1

Попробуйте:

$('img.th').live('click', function(){...});

Таким образом, действие щелчка прикрепляется к любым текущим и будущим img.th селекторам.

Answer 2

Вам нужно прикрепить обработчики событий после загрузки HTML.

Или вы можете использовать .live ()

Answer 3

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

$('#thumbCont').delegate('img.th', 'click', function(e) {
  // ...
});

Редактировать

Немного подробнее о различиях между delegate и live:

Они ведут себя аналогичным образом, но delegate имеет тенденцию превосходить live; было бы немного далеко, чтобы предположить, что live является устаревшим, так как на него полагается столько кода, но delegate был введен в 1.4 для устранения некоторых ловушек live (введен в 1.3). По сути, live присоединяет прослушиватель событий к document, тогда как delegate присоединяет его к селектору, переданному в ваш метод jQuery. Шансов на непреднамеренные столкновения меньше, он работает лучше, поскольку ему нужно пройти только через небольшое подмножество элементов, и есть некоторые побочные проблемы с цепочкой, с которыми live борется ( здесь ).