为什么我的ajax函数无法进行无限滚动？

Question

我正在构建一个具有无限滚动的网页，使用带有后端的waypoints.js作为Django。问题是，我的jquery和ajax函数在处理第一页上的内容时不会处理新生成的内容。 **编辑： - **我正在更新我的代码，以便更容易取消和我的问题。

<div class="infinite-container">
  {%if result %}
  {% for c in result %}
  <div class="infinite-item">
    <img class="likebutton" value="{{c.id}}" id="{{c.id}}" src="{%static "/images/icons/renameheart.png" %}" />
    <div class="LikeCount" id="LikeCount{{c.id}}">{{c.totallikes}}{%if c.totallikes|add:0 == 1%} Like{% elif c.totallikes|add:0 == 0  %} Like {% else %} Likes{% endif %}</div>
  </div>
   {% endfor %}
  {% if result.has_next %}<a class="infinite-more-link" href="?page={{ result.next_page_number }}"></a><div class="loading">loading...</div>{% endif %}
    {% endif %}

</div>
 <script type="text/javascript">
var infinite = new Waypoint.Infinite({
  element: $('.infinite-container')[0],
  onBeforePageLoad: function () {
    $('.loading').show();
  },
  onAfterPageLoad: function ($items) {
    $('.loading').hide();
  }
});

 $(document).ready(function(){
    $('.likebutton').click(function(){
        var id=$(this).attr('value');
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        var datat={'id':id};
        $.ajax({
            type:"POST",
            url:"/like/",
            data:datat,
            headers:{
                "X-CSRFToken": csrftoken
            },
            success:function(data){
                if (data.condition==="Liked"){
                    $('#'+id).attr("src","/static/images/icons/renameheart.png");
                }
                if (data.condition==="Unliked"){
                    $('#'+id).attr("src","/static/images/icons/heart.png");
                }
                var likecon=$('#LikeCount'+id);
                likecon.empty();
                if (data.likes > "1"){
                     likecon.text(data.likes+" Likes");
                }else{
                     likecon.text(data.likes+" Like");
                }
            }
        });
    });


});

现在假设每个页面包含5个条目，那么我的jquery和ajax函数仅处理前5个条目。

Answer 1

这正是onAfterPageLoad的用途，为了确保您在原始页面中的元素上运行的任何javascript，您也可以在新添加的元素上运行：

var performClickEvent = function(event) {
    ...
}

$(document).ready(function(){
     $('.likebutton').on('click', performClickEvent)
}

onAfterPageLoad: function($items) {
    $('.loading').hide();
    $items.each(function() {
        $(this).find('.likebutton').on('click', performClickEvent);
    }
}

其中performClickEvent是您在文档就绪时作为点击处理程序附加到$('.likebutton') div的函数。