Why my ajax function are not working on infinite scrolling?

问题

I am building a webpage having infinite scroll using waypoints.js with backend as Django.The problem is, my jquery and ajax functions are not working on newly generated content while they are working with content on first page. **EDIT:-**I am updating my code so that it will be easier to undertsand my question.

<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");
                }
            }
        });
    });


});

Now suppose if every page contains 5 entries, then my jquery and ajax functions are working on first 5 entries only.

回答1:

This is exactly what onAfterPageLoad is for, to make sure any javascript you run on the elements that were in the original page you can also run on the newly added elements:

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);
    }
}

where performClickEvent is the function you also attach as click handler to your $('.likebutton') divs on document ready.

来源：https://stackoverflow.com/questions/55264940/why-my-ajax-function-are-not-working-on-infinite-scrolling