jquery无法查看为无限轮播生成的项

Question

我试图创建一个旋转木马，其中包含7天与项目下的每一天。当按下next按钮时，jquery将查找表单<span class="date">DATE</span>的最后一个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-08-15开始时，是2011-10-26。

以下是加载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语言，则应使用$(data)将其转换为DOM元素

$.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')压缩到前面的选择器中。