如何通过JavaScript点击HTML元素时获取对应data-pk值并用于AJAX请求

第一步：修复HTML的ID重复问题 #

原HTML中所有<a>标签使用了重复的id="convers"，违反HTML规范（ID必须唯一），直接删除该重复ID，通过类选择器conversation-button定位元素即可：

<ul class="conversations">
    {% if t_ques %}
        <li class="grouping">Today</li>
        {% for item in t_ques %}
            <li class="active">
                <!-- 移除重复的id="convers" -->
                <a class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}">
                    <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }}
                </a>
                <div class="fade"></div>
                <div class="edit-buttons">
                    <button><i class="fa fa-edit"></i></button>
                    <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button>
                </div>
            </li>
        {% endfor %}
    {% endif %}
    {% if y_ques %}
        <li class="grouping">Yesterday</li>
        {% for item in y_ques %}
            <li>
                <a class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}">
                    <i class="fa fa-message fa-regular"></i>  {{item.title| truncatewords:04 }}
                </a>
                <div class="fade"></div>
                <div class="edit-buttons">
                    <button><i class="fa fa-edit"></i></button>
                    <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button>
                </div>
            </li>
        {% endfor %}
    {% endif %}
    {% if s_ques %}
        <li class="grouping">Previous 7 days</li>
        {% for item in s_ques %}
            <li>
                <a class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}">
                    <i class="fa fa-message fa-regular"></i>  {{item.title| truncatewords:04 }}
                </a>
                <div class="fade"></div>
                <div class="edit-buttons">
                    <button><i class="fa fa-edit"></i></button>
                    <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button>
                </div>
            </li>
        {% endfor %}
    {% endif %}
    {% if more_s_ques %}
        <li class="grouping">Previous 30 days</li>
        {% for item in more_s_ques %}
            <li>
                <a class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}">
                    <i class="fa fa-message fa-regular"></i>  {{item.title| truncatewords:04 }}
                </a>
                <div class="fade"></div>
                <div class="edit-buttons">
                    <button><i class="fa fa-edit"></i></button>
                    <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button>
                </div>
            </li>
        {% endfor %}
    {% endif %}
</ul>
</div>

第二步：编写正确的JavaScript代码 #

核心问题是之前的AJAX代码在页面加载时直接执行，未绑定到点击事件上。需要将AJAX逻辑放入点击回调函数中，同时正确获取点击元素的data-pk值：

// 选择所有对话按钮
const conversationButtons = document.querySelectorAll(".conversation-button");

// 为每个按钮绑定点击事件
conversationButtons.forEach(button => {
    button.addEventListener("click", function(e) {
        // 阻止a标签默认跳转行为
        e.preventDefault();
        
        // 获取当前点击元素的data-pk值，使用dataset更简洁
        const idValue = this.dataset.pk;
        console.log(idValue);

        // 动态生成请求URL
        let url;
        if (!chat_id) {
            url = `/chat-previous/${idValue}/`;
        } else {
            url = 'initiate-chat/';
        }

        // 执行AJAX请求
        $.ajax({
            type: 'POST',
            url: url,
            data: {
                message: usermsg,
                chatId: chat_id,
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                action: 'post'
            },
            success: function(json){
                const res = json['chats']
                setTimeout(() => {
                    hideTyping();
                    body.appendChild(mgses(res, "assistant"));
                    scrollToBottomOfResults();
                }, 1000);
                console.log(json);
            },
            error: function(rs, e){
                setTimeout(() => {
                    hideTyping();
                    body.appendChild(setBotResponse("bot"));
                    scrollToBottomOfResults();
                }, 600);
                console.log(rs.error);
            },
        });
    });
});

关键问题说明 #

• ID重复：原代码用重复ID选择元素不符合规范，改用类选择器conversation-button符合标准且更合理。
• 事件时机：之前AJAX代码在页面加载时直接执行，未关联点击事件，必须将请求逻辑放入点击回调内。
• Data属性获取：使用this.dataset.pk是标准的Data API用法，比getAttribute('data-pk')更简洁。
• 阻止默认行为：<a>标签默认会跳转页面，必须用e.preventDefault()阻止，才能保证AJAX请求正常执行。

内容的提问来源于stack exchange，提问作者learn'n