动态生成按钮的onclick传递数组报错，该如何解决？

嘿，我来帮你搞定这个问题！你遇到的报错根源在于直接把数组拼到HTML字符串里时，数组会被自动转换成逗号分隔的字符串。原代码里send数组转成字符串后是"HOLA,ADIOS"，拼到onclick里就变成了show(HOLA,ADIOS)——这时候浏览器会把HOLA和ADIOS当成未定义的变量，自然就报错啦。

下面给你三种靠谱的解决办法，按需选择：

方法1：用JSON.stringify转成合法的数组字面量 #

把数组转成JSON格式的字符串，这样拼到onclick里就是标准的数组写法，浏览器能正确识别：

function show(array){ 
  console.log(array); 
} 
function main() { 
  var send = ["HOLA", "ADIOS"]; 
  // 将数组转为JSON字符串，得到["HOLA","ADIOS"]
  var sendStr = JSON.stringify(send);
  $('#table').append('<tr>'+ 
    '<td style="width: 35%">Oscar</td>'+ 
    '<td style="width: 6%">'+ 
    '<button type="button" class="btn btn-success" data-dismiss="modal" onclick="show('+sendStr+')">+</button>'+ 
    '</td>'+ 
    '</tr>' 
  ); 
} 
main();

方法2：直接绑定点击事件（推荐） #

避免在HTML里写onclick，用jQuery直接给按钮绑定事件，利用闭包直接访问send数组，代码更清晰健壮：

function show(array){ 
  console.log(array); 
} 
function main() { 
  var send = ["HOLA", "ADIOS"]; 
  // 创建按钮元素并绑定点击事件
  const $btn = $('<button type="button" class="btn btn-success" data-dismiss="modal">+</button>');
  $btn.click(() => show(send));
  
  // 组装表格行并添加到页面
  const $tr = $('<tr>')
    .append('<td style="width: 35%">Oscar</td>')
    .append($('<td style="width: 6%">').append($btn));
  
  $('#table').append($tr);
} 
main();

方法3：用data属性存储数组（适合多按钮场景） #

把数组转成JSON字符串存在按钮的data-*属性里，再通过事件委托读取解析，适合需要批量生成按钮的场景：

function show(array){ 
  console.log(array); 
} 

// 给父元素绑定事件委托，监听动态生成的按钮点击
$('#table').on('click', '.btn-success', function() {
  // 从data属性读取并解析数组
  const send = JSON.parse($(this).data('send'));
  show(send);
});

function main() { 
  var send = ["HOLA", "ADIOS"]; 
  $('#table').append('<tr>'+ 
    '<td style="width: 35%">Oscar</td>'+ 
    '<td style="width: 6%">'+ 
    '<button type="button" class="btn btn-success" data-dismiss="modal" data-send="'+JSON.stringify(send)+'">+</button>'+ 
    '</td>'+ 
    '</tr>' 
  ); 
} 
main();

这三种方法都能解决你的问题，其中方法2和3更符合现代前端的写法，避免了字符串拼接带来的潜在问题，推荐优先使用~

内容的提问来源于stack exchange，提问作者Oscar Ordoñez