时间戳

首页 > 解决方案 > 脚本不适用于无限滚动内的元素

javascript - 脚本不适用于无限滚动内的元素

问题描述

我在我的代码中引入了无限滚动，现在like 脚本不起作用：当我按下like 按钮时页面被刷新。

Like-btn 脚本：

 <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>

无限滚动脚本

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

无限滚动正常工作，但在无限滚动后充电的元素中，like-btn 脚本不起作用。

有人能看出问题出在哪里吗？

谢谢您的帮助！

标签： javascripthtmldjangoinfinite-scroll

解决方案

该click函数仅适用于定义时存在的元素。相反，您应该使用on它以适用于动态添加的元素：

$('.infinite-container').on("click", ".like-btn", function(e){

推荐阅读