动态创建表格单元格时onclick无法找到点击处理函数原因排查

为什么点击单元格时提示sayHello未定义？ #

• sayHello函数定义在$(document).ready()的回调函数内部，属于局部作用域。而通过onclick内联属性绑定的事件代码，会在全局作用域下执行，全局作用域中不存在这个函数，因此会触发“未定义”错误。

为什么onclick=${sayHello(i)}会立即调用函数？ #

• 模板字符串里的${sayHello(i)}是直接执行函数，并将函数的返回值（这里是undefined）赋值给onclick属性。这个调用会在循环生成HTML代码时立刻执行，而不是等到单元格被点击时触发。

解决方法 #

方法1：将函数提升到全局作用域 #

把sayHello移到$(document).ready()外部，让它成为全局可访问的函数：

function sayHello(num){ console.log("Hello:"+num);}
$(document).ready(function(){
    var dataRow = ``;
    for(let i=0;i<5;++i)
        dataRow+=`<tr><td onclick="sayHello(${i})">Hello, ${i}</td></tr>`; 
    $("#dataHere tbody").html(dataRow);
})

方法2：使用事件委托（更推荐） #

避免内联事件绑定，改用jQuery的事件委托，既不需要暴露全局函数，也能更灵活地管理事件：

$(document).ready(function(){
    function sayHello(num){ console.log("Hello:"+num);}
    var dataRow = ``;
    for(let i=0;i<5;++i)
        dataRow+=`<tr><td data-num="${i}">Hello, ${i}</td></tr>`; 
    $("#dataHere tbody").html(dataRow);
    
    // 通过事件委托监听td点击
    $("#dataHere tbody").on("click", "td", function(){
        let num = $(this).data("num");
        sayHello(num);
    });
})

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