如何通过jQuery循环为多个按钮绑定点击事件？

先给你指出现有jQuery代码的几个问题：

• 选择器语法错误：$("#"(q_no) 应该写成 $("#" + q_no)
• 循环绑定事件存在闭包陷阱：循环结束后q_no的值会变成31，所有按钮点击时都会引用这个最终值
• 弹窗内容固定，没有对应点击的按钮编号

下面提供几种实用的解决方案：

方案一：事件委托（推荐） #

直接给父元素绑定事件，利用事件冒泡处理所有按钮的点击，不用循环绑定，效率更高：

$(document).ready(function(){
    // 可替换成按钮实际的父容器选择器，比绑定到body更精准
    $("body").on("click", ".q_no_btn", function(){
        var qNo = $(this).attr("id");
        alert("Click on Question no " + qNo + "!!!");
    });
});

方案二：类选择器直接绑定 #

所有按钮都有q_no_btn类，直接给这个类绑定事件，通过this获取当前点击的按钮信息：

$(document).ready(function(){
    $(".q_no_btn").click(function(){
        // 两种方式获取题目编号，选一种即可
        var qNo = $(this).attr("id");
        // var qNo = $(this).text().replace("Question no ", "");
        alert("Click on Question no " + qNo + "!!!");
    });
});

方案三：修复循环绑定的闭包问题 #

如果一定要用循环绑定，需要通过立即执行函数保存每次循环的q_no值：

$(document).ready(function(){
    for(var q_no=1; q_no<=30; q_no++){
        (function(currentQ){
            $("#" + currentQ).click(function(){
                alert("Click on Question no " + currentQ + "!!!");
            });
        })(q_no);
    }
});

你的PHP生成按钮的代码没有问题，确保页面正确渲染出按钮即可。

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