jQuery动态生成button的onclick属性失效 页面加载时函数自动触发问题

问题产生原因 #

两个异常的根本原因是onclick属性的赋值逻辑错误：

• 代码中'onclick': select($i)的写法会在赋值时直接执行select($i)获取返回值，而非将函数作为事件处理程序绑定。因此遍历学生数据时select函数会被循环调用，导致页面加载阶段就打印出对应日志。
• 自定义的select函数没有返回值，执行后返回undefined，相当于给onclick属性赋值了空值，因此最终生成的按钮元素上看不到onclick属性。

修复方案 #

方案1：内联事件快速修复 #

把select($i)改为字符串拼接形式，避免赋值阶段直接执行函数：

$.get($querystudent, function(response)
    {
        tbodystudent.empty();
        console.log("Table TBODY Cleared!");
        var students = response.result;
        var $i = 0
        $.each(students, function(_,student)
        {
            $i = student.ID
            tbodystudent.append(
                $("<tr>").append(
                    $("<td>").text(student.FirstName),
                    $("<td>").text(student.MiddleName),
                    $("<td>").text(student.LastName),
                    $("<td>").text(student.CourseID),
                    $("<td>").text(student.YearLevel),
                    $("<input>").attr({
                        'type':'button',
                        'class':'button is-primary is-small',
                        'id':$i, 
                        'onclick': 'select(' + $i + ')' // 改为字符串形式的函数调用
                    }).val("Select")          
                ),
            );
        });
    }, "json");

方案2：jQuery事件绑定（更推荐） #

不使用内联onclick属性，改用jQuery的on方法绑定事件，避免闭包问题同时代码可维护性更强：

$.get($querystudent, function(response)
    {
        tbodystudent.empty();
        console.log("Table TBODY Cleared!");
        var students = response.result;
        $.each(students, function(_,student)
        {
            tbodystudent.append(
                $("<tr>").append(
                    $("<td>").text(student.FirstName),
                    $("<td>").text(student.MiddleName),
                    $("<td>").text(student.LastName),
                    $("<td>").text(student.CourseID),
                    $("<td>").text(student.YearLevel),
                    $("<input>").attr({
                        'type':'button',
                        'class':'button is-primary is-small'
                    }).data('student-id', student.ID) // 用data属性存储ID更稳妥
                    .val("Select")
                    .on('click', function() {
                      select($(this).data('student-id'))
                    })       
                ),
            );
        });
    }, "json");

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