0

I have introduced infinite scroll in my code and now the like script does not work: the page is refreshed when I push the like button.

Like-btn script:

 <script>
         $(document).ready(function(){
            function updateText(btn, newCount, iconClass, verb){
                verb = verb || "";
                $(btn).html(newCount + '&nbsp<i class="' + iconClass + '"style="font-size:15px;"></i>' + verb )  
                btn.attr("data-likes", newCount)
            }

            $('.infinite-container').on("click", ".like-btn",(function(e){
                e.preventDefault()
                var this_ = $(this)
                var likeUrl = this_.attr("data-href")
                var likeCount = parseInt(this_.attr("data-likes")) | 0
                var addLike = likeCount + 1
                var removeLike = likeCount - 1

                if (likeUrl){
                    $.ajax({
                        url: likeUrl,
                        method: "GET",
                        data: {},
                        success: function(data){
                            console.log(data)
                            var newLikes;
                            if (data.liked){
                                updateText(this_, addLike, "fas fa-heart")
                            } else {
                                updateText(this_, removeLike, "far fa-heart")
                            }
                        }, error: function(error){
                            console.log(error)
                            console.log("error")
                        }
                    })
                }
            })
        })

    </script>

Infinite scroll script

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

Infinite scroll works correctly but in the elements charged after infinite scroll, the like-btn script does not work.

Could somebody see where is the problem?

Thank you for your help!

Community
  • 1
  • 1
JohnWire
  • 97
  • 2
  • 12

1 Answers1

0

The click function only applies to elements that exist when it is defined. Instead you should use on so it applies to elements that are added dynamically:

$('.infinite-container').on("click", ".like-btn", function(e){
Daniel Roseman
  • 588,541
  • 66
  • 880
  • 895
  • Look my code updated. Now with the modifications, the infinite scroll does not work. Do I put the wrong order? – JohnWire Feb 16 '19 at 13:07
  • I didn't say to replace the infinite scroll code, I said to replace your click function in the first snippet. – Daniel Roseman Feb 16 '19 at 13:11
  • Okay, sorry for the misunderstanding. I have refreshed the code, but it remains the same. Infinite scroll works, but not the like button without refreshing. – JohnWire Feb 16 '19 at 13:42
  • Do I have to change something in the html code also? because it does not work like that.. – JohnWire Feb 17 '19 at 17:19