jQuery中需以字符串而非变量传参，调用onclick函数遇阻求助

嘿，我一眼就揪出你遇到的问题啦！你在拼接onclick事件参数时，没给字符串类型的item.name和item.description加上引号，导致浏览器把这些值当成JavaScript变量而非字符串字面量去解析——如果当前作用域里没有同名变量，直接就会抛出ReferenceError异常。

修复方案1：手动添加引号（基础版） #

在拼接参数时，给item.name和item.description包裹上单引号（注意用转义符\'避免和外层引号冲突），这样生成的HTML会把它们识别为合法的字符串参数：

$(function() {
  $.each(json, function(i, item) {
    var row = '<tr>' +
              '<td>' + item.id + '</td>' +
              '<td class="project-title"><a onclick="loadData(' + item.id + ', \'' + item.name + '\', \'' + item.description + '\')">' + item.name + '</a></td>' +
              '<td>' + item.description + '</td>' +
              '</tr>';
    $('#Table tbody').append(row);
  });
});

修改后生成的onclick代码会变成loadData(123, '项目名称', '项目描述')这种符合JS语法的格式。

修复方案2：用JSON.stringify转义（更安全） #

如果你的字符串里包含特殊字符（比如单引号、换行符），手动加引号会触发新的语法错误。这时候用JSON.stringify是更稳妥的选择，它会自动处理所有转义逻辑：

$(function() {
  $.each(json, function(i, item) {
    var row = '<tr>' +
              '<td>' + item.id + '</td>' +
              '<td class="project-title"><a onclick="loadData(' + item.id + ', ' + JSON.stringify(item.name) + ', ' + JSON.stringify(item.description) + ')">' + item.name + '</a></td>' +
              '<td>' + item.description + '</td>' +
              '</tr>';
    $('#Table tbody').append(row);
  });
});

JSON.stringify会把字符串转换成标准的JS字面量，比如"O'Neil"会被转成"O'Neil"（带双引号），直接拼入onclick后完全合法。

额外建议：尽量避免拼接HTML字符串 #

其实更优雅且安全的做法是用jQuery直接创建DOM元素并绑定事件，彻底避开字符串拼接的麻烦：

$(function() {
  $.each(json, function(i, item) {
    var $link = $('<a>').text(item.name).on('click', function() {
      loadData(item.id, item.name, item.description);
    });
    var $row = $('<tr>')
      .append($('<td>').text(item.id))
      .append($('<td>').addClass('project-title').append($link))
      .append($('<td>').text(item.description));
    $('#Table tbody').append($row);
  });
});

这种方式直接通过JS绑定事件，参数传递完全不需要处理转义，还能避免潜在的XSS风险哦！

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