jQuery动态表格向Show detail模态框传参及onclick失效问题

核心是动态拼接HTML时的变量作用域错误：
你在forEach循环里拼接按钮的onclick属性时，写的是onclick="sendValue(d.idColloquio)"，这段字符串里的d不会在拼接阶段被解析成循环的局部遍历变量，而是会等到用户点击按钮、触发事件的时候，才到全局作用域里找名为d的变量。
但实际d只是forEach回调里的局部变量，循环执行完就会被销毁，全局作用域下根本不存在d这个对象，点击时会直接抛出d is not defined的JS错误，导致事件逻辑无法执行——这也是为什么你能在DOM节点上看到onclick属性，但功能跑不通的原因。

你可以任选以下一种方案修复，推荐优先用第二种事件委托的方式，可维护性更高：

• 方案1：拼接HTML时直接把id值嵌入属性，传字面量而非变量引用
  修改循环里拼接按钮的代码，把d.idColloquio的实际值直接拼进onclick字符串里，不要保留变量引用：

  // 如果id是数字类型用这行
  table += '<td><button type="button" onclick="sendValue(' + d.idColloquio + ')">Add a feedback</button></td></tr>';
  
  // 如果id是字符串类型，需要给值加单引号转义
  // table += '<td><button type="button" onclick="sendValue(\'' + d.idColloquio + '\')">Add a feedback</button></td></tr>';
  

  这样最终渲染到DOM里的onclick属性会是类似sendValue(101)的形式，直接传固定值，不依赖外部变量，点击就能正常触发你写的跳转逻辑。

• 方案2：用jQuery事件委托代替内联onclick绑定（推荐）
  不在拼接HTML时写内联事件，而是给按钮加自定义数据属性存储对应记录的id，从根源上避免作用域问题：

  1. 修改按钮拼接代码，去掉onclick，加class和data属性：

  table += '<td><button type="button" class="add-feedback-btn" data-id-colloquio="' + d.idColloquio + '">Add a feedback</button></td></tr>';
  

  2. 在$(document).ready的作用域下，给表格的静态父节点绑定委托事件，动态生成的按钮也能触发：

  // 这段代码放在$(document).ready里即可，不需要等动态表格渲染完再绑定
  $('#mytable').on('click', '.add-feedback-btn', function () {
    const colloquioId = $(this).data('id-colloquio');
    window.location.href = "insertMotivationFeedback?idColloquio=" + colloquioId;
  });
  

  这种写法不需要把sendValue函数挂在全局作用域，也不会出现字符串拼接带来的变量引用问题，后续要改模态框传参逻辑也更方便。

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