使用Django分页+无限滚动时HTMX点击功能失效求助

我在Django应用中实现了点击商品卡片加入购物车的功能，采用infinite-scroll（无限滚动）和django-pagination（Django分页）组件。目前遇到的问题是：第一页的HTMX功能完全正常，但第二页及之后的页面，点击加入购物车按钮无任何响应。检查页面后发现HTML渲染正常，hx-get请求的URL也正确，但点击操作没有触发预期行为。

相关代码 #

HTML主页面代码 #

<div class="container"
    data-infinite-scroll='{ "path": ".pagination__next", "append": ".product-card", "history":"false"}'>
    {% block content %}
    {% include 'includes/cards.html' %}
    {% include 'includes/sidebar.html' %}
    {% endblock content %}
</div>
<ul class="pagination mt-50 mb-70">
    {% if products.has_previous %}
         <li class="page-item"><a class="page-link" href="?page={{ products.previous_page_number }}"><i class="fa fa-angle-left"></i></a></li>
     {% endif %}
     <li class="page-item"><a class="page-link" href="#">{{ products.number }}</a></li>
      {% if products.has_next %}
     <li class="page-item"><a class="pagination__next" href="?page={{ products.next_page_number }}"><i class="fa fa-angle-right"></i></a></li>
     {% endif %}
</ul>

views.py代码 #

def shop(request):
    anabanner = AnaBanner.objects.all()
    gender = Gender.objects.all()
    categories = Category.objects.all()
    colors = Color.objects.all()
    materials = Material.objects.all()
    query = request.GET.get('query','')
    products = Product.objects.all().order_by('-pk')
    if query:
        products = products.filter(
            Q(name__icontains=query)|
            Q(sub_name__icontains=query)
        ).distinct()
    paginator = Paginator(products, 8)

    page = request.GET.get('page')

    products = paginator.get_page(page)
    context = {'products':products,'categories':categories,'gender':gender,'anabanner':anabanner,'colors':colors,'materials':materials}
    return render(request, 'shop.html', context)

加入购物车按钮代码（cards.html中） #

<div class="button">
    <div class="button-layer"></div>
    <button name="ekle" 
        href ="#"
        hx-get="{% url 'add_to_cart' product.id %}"
        hx-target="#menu-cart-button"
        hx-swap="outerHTML" 
        class="btn btn-outline-secondary add-btn update-cart">Sepete Ekle</button>
</div>

问题原因 #

HTMX依赖事件委托处理初始DOM元素的交互，但无限滚动动态加载的新内容（第二页及以后的商品卡片）不会被HTMX自动绑定事件监听，导致点击按钮无响应。

解决方案 #

方案1：手动触发HTMX扫描新DOM元素 #

利用infinite-scroll的加载完成回调，调用HTMX全局方法处理新添加的元素：

document.querySelector('.container').addEventListener('append.infiniteScroll', function(event) {
  htmx.process(event.target);
});

方案2：调整视图返回内容适配HTMX #

通过django-htmx判断请求类型，分页请求仅返回商品卡片片段，让HTMX自动处理新元素：

1. 安装并配置django-htmx后，修改视图：

def shop(request):
    # 原有逻辑不变
    if request.htmx:
        return render(request, 'includes/cards.html', context)
    return render(request, 'shop.html', context)

方案3：改用HTMX原生实现无限滚动 #

替换独立的infinite-scroll组件，直接用HTMX属性实现滚动加载，自动处理新元素事件：

{% if products.has_next %}
<li class="page-item">
    <a class="pagination__next" 
       hx-get="?page={{ products.next_page_number }}"
       hx-target=".container"
       hx-swap="beforeend">
        <i class="fa fa-angle-right"></i>
    </a>
</li>
{% endif %}

同时移除原容器上的data-infinite-scroll属性。

内容的提问来源于stack exchange，提问作者Berkant Dirim