如何让单个按钮在多个div中区分不同帖子处理投票请求

核心问题 #

你的代码存在三个关键问题导致按钮无法区分不同帖子：

1. 重复ID冲突：所有投票按钮都使用id="clickBtn"，HTML中ID必须唯一，这会导致jQuery选择器失效，只能识别第一个按钮。
2. 全局函数被覆盖：每次循环渲染自定义标签时，都会重新定义全局的voteOnModel函数，最终所有按钮调用的都是最后一次循环的帖子参数。
3. 事件绑定错误：绑定点击事件到div.column，会导致多个事件重复绑定，且无法精准获取当前点击按钮对应的帖子数据。

修正方案 #

1. 修改自定义标签：输出带唯一数据标识的按钮

去掉重复的ID，改用class标识按钮，并通过data-*属性存储当前帖子的model和id，方便点击时获取对应数据。

修改后的cf_voteOnModel自定义标签内容：

<cfparam name="Attributes.model" default="">
<cfparam name="Attributes.id" default="">

<cfoutput>
    <button type="button" name="voteBtn" class="voteBtn" data-model="#Attributes.model#" data-id="#Attributes.id#">CLICK</button>
</cfoutput>

2. 重构AJAX逻辑：避免全局函数与重复绑定

将AJAX逻辑移到主页面，只加载一次脚本，通过按钮的data-*属性获取当前帖子的参数，确保每次点击只发送对应帖子的请求。

主页面添加脚本（放在循环外部）：

<div class="container">
<cfoutput query="local.mainData">
        <div class="column">
        <cfset local.fetchModelData = createObject("component", "Fanexus.tools.tools").voteOnModelTwo(local.mainData.post_id, local.mainData.post_model_username)>
        <cf_voteOnModel model="#local.fetchModelData.post_model_name#" id="#local.fetchModelData.post_id#">
        </div>
</cfoutput>
</div>

<script language="JavaScript">
$(document).ready(function() {
    // 绑定class选择器的点击事件，确保只绑定一次
    $(".voteBtn").click(function (){
        // 获取当前点击按钮对应的帖子数据
        var modelName = $(this).data('model');
        var postId = $(this).data('id');

        $.ajax({
            url: './index.cfc',
            dataType: 'json',
            data: {
                model_name: modelName,
                post_id: postId,
                method: 'voteOnModel',
                returnFormat: 'json'
            },
            success: function (data) {
                console.log(data);
                alert("YAY " + data[1].text);
            }
        });
    });
});
</script>

关键改进点 #

• 用class替代重复ID：避免HTML元素标识冲突，确保每个按钮都能被正确识别。
• data属性存储上下文：将帖子的关键参数绑定到按钮上，点击时直接读取，无需依赖全局变量。
• 脚本只加载一次：防止多次绑定事件导致点击一次触发多次AJAX请求的问题。

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