jquery не видит элементы, созданные для бесконечной карусели

Question

Я пытаюсь создать карусель, которая содержит 7 дней с предметами под каждый день. Когда нажата следующая кнопка, jquery ищет последний элемент span формы <span class="date">DATE</span>, получает значение и передает его на сервер, чтобы получить следующие 3 записи. Эти записи затем добавляются к <ul class="week"> Элемент и целые 7 дней скользят вправо на 3 шага. Моя первая проблема заключается в том, что после первого щелчка jquery, похоже, не видит динамически сгенерированный контент и просто отправляет начальное значение даты на сервер, заставляя его повторять эти 3 даты снова и снова. Вторая проблема заключается в том, что после нажатия достаточно долго, он просто перестает генерировать новый контент и не может добавить контент до конца, даже если сервер все равно будет выплевывать html в те дни. Я новичок в этом и, возможно, не лучший метод разобрался. Вот мой соответствующий код:

        $('.next').click( function() {
    var date = $(".date").filter(':last').text()  //grab the last date class and parse into url to send to server 
    $.get('/log_entries/ajaxdate/'+date, function(data) {
      $('.week').append(data);
    });
    $('.test').animate({left: '-=272px'}, 500);

});

Хорошо, первая проблема решена, данные, отправленные обратно с сервера, не содержали элемент span вокруг даты, даты теперь правильно увеличиваются благодаря @RoccoC5

Я все равно заканчиваю произвольно заканчивать записи, как только я выхожу достаточно высоко, в этом случае 2011-10-26 при запуске в 2011-08-15.

Вот код, отправленный обратно с сервера при загрузке log_entries/ajaxdate/2011-09-12:

<li class = "entry"><span class="date">2011-09-13</span> 
</li> 
<li class = "entry"><span class="date">2011-09-14</span> 
</li> 
<li class = "entry"><span class="date">2011-09-15</span> 
</li>

Answer 1

Если ответ чистый HTML, вы должны преобразовать его в элементы DOM, используя $(data):

$.get('/log_entries/ajaxdate/'+date, function(data) {
    $('.week').append($(data));
});

или работать с innerHTML, просто пример:

var jweek = $('.week');
jweek.html(jweek.html() + data);

Вы также должны использовать .closest() а также .find() чтобы убедиться, что вы работаете с одной каруселью и не выбираете другую .data или же .next элементы со страницы:

<div class="carousel">
    <ul class="week">
        <li class="entry"><span class="date">2011-08-16</span></li>
    </ul>
    <a href="..." class="next">Next</a>
</div>

$('.carousel .next').click( function() {
    // find the parent .week and then .date inside of it
    var date = $(this).closest('.week').find('.date:last').text();
    ...
 });

Обратите внимание, что .filter(':last') может быть сжат в предыдущий селектор.