Почему моя функция ajax не работает с бесконечной прокруткой? - PullRequest
Новая
       20

Почему моя функция ajax не работает с бесконечной прокруткой?

1 голос
/ 20 марта 2019

Я создаю веб-страницу с бесконечной прокруткой, используя 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 записями.

1 Ответ

3 голосов
/ 20 марта 2019

Это именно то, для чего 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') элементам в готовом документе.

...