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

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

1 голос
/ 16 августа 2011

Я пытаюсь создать карусель, которая содержит 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>

1 Ответ

0 голосов
/ 16 августа 2011

Если ответ - чистый 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') может быть сжат в предыдущий селектор.

...