为何出现‘function not defined at HTMLAnchorElement.onclick’错误？

Hey there, let's break down why your doSomething function is throwing a "not defined" error when you click that dynamically created link, and fix it up!

问题根源 #

主要有两个常见原因导致这个错误：

1. 作用域不匹配：当你用setAttribute("onclick", "doSomething(" + data + ")")时，这个字符串形式的函数调用会在全局作用域中查找doSomething。如果你的doSomething定义在局部作用域（比如闭包、$(document).ready()回调里），全局作用域根本找不到它。
2. 数据拼接的语法错误：如果data是字符串或者对象，直接拼接成字符串会产生无效的JS代码。比如data是"test"的话，拼接后会变成doSomething(test)，这里test会被当成变量而非字符串，直接触发语法错误，间接导致函数调用失败。

推荐解决方案：使用事件监听绑定（现代JS最佳实践） #

放弃用onclick属性绑定的方式，改用addEventListener，这样既避免作用域问题，又能安全传递数据：

function MyFunction(){ 
  $.post("servletname", {"element": variable}, function(data){ 
    var action = document.createElement("a"); 
    action.setAttribute("class", "button");
    
    // 用addEventListener绑定点击事件
    action.addEventListener('click', function() {
      doSomething(data);
    });
    
    action.appendChild(randomNode); 
    // 别忘了把创建好的元素添加到DOM中！
    // 替换成你实际要插入的父元素，比如document.getElementById("some-container")
    document.body.appendChild(action);
  }) 
}

// 只要doSomething在当前作用域可访问即可，无需强制全局
function doSomething(dataFromJQuery){ 
  // do things with dataFromJQuery 
}

为什么这个方法更好？ #

• 事件处理函数是闭包，能直接访问到AJAX回调里的data，不用做字符串拼接。
• doSomething不需要暴露在全局作用域，避免全局变量污染。
• 不存在语法错误风险，也更安全（避免潜在的XSS问题，如果data包含用户输入的话）。

备选方案：强制函数全局+修复数据拼接（不推荐） #

如果你一定要坚持用onclick属性的方式，需要做两个调整：

1. 把doSomething挂载到全局作用域：

// 确保函数在全局可访问
window.doSomething = function(dataFromJQuery){ 
  // do things with dataFromJQuery 
}

2. 正确拼接data的格式：
   • 如果data是字符串：要给它加单/双引号

     action.setAttribute("onclick", "doSomething('" + data + "')");
     

   • 如果data是JSON对象：先用JSON.stringify转成合法的字符串

     action.setAttribute("onclick", "doSomething(" + JSON.stringify(data) + ")");
     

额外提醒 #

别忘了把动态创建的<a>标签添加到DOM树中（比如document.body.appendChild(action)），不然你根本看不到也点不到这个元素哦！

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