为什么我的Ajax函数在无限滚动中不起作用? [英] Why my ajax function are not working on infinite scrolling?

问题描述

我正在使用waypoints.js和后端为Django的网页构建无限滚动的问题，问题是我的jquery和ajax函数在处理第一页的内容时无法处理新生成的内容. **-**我正在更新代码，以便更容易理解我的问题.

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


});

现在假设如果每个页面包含5个条目，那么我的jquery和ajax函数仅在前5个条目上起作用.

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

推荐答案

这正是onAfterPageLoad的目的，以确保您在原始页面中的元素上运行的所有javascript也可以在新页面上运行添加的元素:

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

其中performClickEvent是您还作为单击处理程序附加到准备好文档的$('.likebutton') div上的功能.

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

这篇关于为什么我的Ajax函数在无限滚动中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！