Django模板循环渲染多div时如何获取点击按钮所属卡片的card_filter_id

解决方法 #

问题核心原因是HTML规范要求DOM节点ID全局唯一，你在循环渲染卡片时给所有隐藏输入框设置了相同的card_filter_id ID，浏览器只会保留最后一个该ID节点的引用，所以取值永远拿到最后一条数据。按以下两步修改即可：

1. 调整前端模板代码

把重复的ID替换为class，同时将「添加到仪表盘」按钮放在每个卡片内部，直接通过自定义属性绑定对应卡片的filter_id，也方便后续定位当前卡片的其他数据：

{% for fig in user_figs %}
<div class='card'>
{% if fig.chart %}
        <input type="hidden" class="card_chart" value="{{ fig }}"> 
        <input type="hidden" class="card_filter_id" value="{{ fig.filter_id }}">
        {{ fig.chart|safe }}
        <!-- 每个卡片对应一个操作按钮，绑定当前卡片的filter_id -->
        <button class="save-to-dashboard-btn" data-filter-id="{{ fig.filter_id }}">添加到仪表盘</button>
        {% endif %}
</div>
{% endfor %}

2. 调整JS事件绑定逻辑

改用事件委托方式监听所有按钮的点击事件，点击时直接从触发事件的按钮上取对应绑定的filter_id，也可以通过父节点定位当前卡片的其他业务数据：

// 全局监听点击事件，匹配对应操作按钮时触发逻辑，动态新增的卡片也能生效
document.addEventListener('click', (e) => {
    if (!e.target.matches('.save-to-dashboard-btn')) return
    console.log("SAVE CHANGES BUTTON CLICKED")
    // 直接从按钮自定义属性取对应卡片ID
    const card_id = e.target.dataset.filterId
    console.log(card_id)
    // 如果需要取当前卡片的其他数据，可通过closest定位到所属卡片后查找对应节点
    const currentCard = e.target.closest('.card')
    const fig = currentCard.querySelector('.card_chart').value

    const form_data = new FormData()
    form_data.append('csrfmiddlewaretoken', csrf_token)
    form_data.append('name', name_of_dashbaord)
    form_data.append('title', title)
    form_data.append('chart', fig)
    form_data.append('card_id', card_id)

    $.ajax({
        type: 'POST',
        url: '/card/save/',
        data: form_data,
        success: function(response){
            console.log(response)
        },
        error: function(error){
            console.log(error)
        },
        processData: false,
        contentType: false,
    })
})

如果不想把ID存在按钮的自定义属性中，也可以直接通过所属卡片查找对应的隐藏输入框取值：const card_id = currentCard.querySelector('.card_filter_id').value，效果完全一致。

内容的提问来源于stack exchange，提问作者Shivam Arora