Question

我在代码中引入了无限滚动，现在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脚本不起作用。

有人可以看到问题出在哪里吗？

谢谢您的帮助！

Answer 1

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

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

脚本在无限滚动内的元素上不起作用

1 个答案: