Question

我正在制作一本有100多本书的书店。通过搜索功能，我同时加载了10本书。当用户向下滚动时，无限滚动功能会加载10本新书（带有ajax）。

每本书标题旁边都有一个购买链接。这是一个用于在购物车中添加图书的ajax链接。

<a href="/books/buy" onclick="return false"><i class="glyphicon glyphicon-circle-arrow-right" id="book<?php echo $bookId;?>"></i></a>

<script type="text/javascript">
$(document).on("click","#book<?php echo $bookId;?>",function(){
            $.ajax({url: "books/buy/<?php echo $bookId;?>", 
                        type:'post',
               })   });
</script>

第一本书的ajax链接运作良好。但是加载无限滚动的书籍的链接无效。

当我试图找到一个解决方案时，我注意到我没有使用bookId，所以所有的图标都有相同的ID，ajax链接正在工作，但后来我不知道选择了哪本书。如果我不使用邀请滚动一切正常，但我必须立即加载到很多书。

Answer 1

我认为有更好的方式来做听众。

<a href="/books/buy/<?php echo $bookId;?>" id="book-link">
    <i class="glyphicon glyphicon-circle-arrow-right></i>
</a>

<script type="text/javascript">
    $(document).on("click","#book-link", function(e) {
        e.preventDefault();
        $.ajax({ 
            url: $(this).attr('href'), 
            type:'post',
        })
    });
</script>

您只需在加载页面时加载脚本部分一次。

我希望它有所帮助。

无限滚动无法工作后的Ajax链接

1 个答案: