如何为动态生成的jQuery按钮绑定带参数的点击事件？

针对你遇到的动态生成按钮无法绑定点击事件、内嵌onclick引号截断的问题，给你三个实用的解决方案，按推荐程度排序：

1. 事件委托（最推荐，适配所有动态元素） #

动态生成的按钮在页面初始加载时不存在，直接通过$('#suspectbtn'+hashKey).on('click')绑定会找不到元素。事件委托是把点击事件绑定到已经存在的父容器（甚至全局的document）上，通过匹配选择器来触发目标按钮的逻辑，不管按钮什么时候生成都有效。

示例代码：

// 绑定到页面全局（如果不确定父容器，用document最稳妥）
$(document).on('click', '[id^="suspectbtn"]', function() {
  // 从按钮ID中提取hashKey
  const hashKey = this.id.replace('suspectbtn', '');
  // 从currentArray中匹配对应的数据项
  const targetData = currentArray.find(item => item.hashKey === hashKey);
  
  // 这里写你点击按钮后要执行的逻辑，比如打印数据或弹窗
  console.log('点击了按钮，对应数据:', targetData);
});

说明：[id^="suspectbtn"]是CSS选择器，意思是"所有ID以suspectbtn开头的元素"，点击这类元素时就会触发事件逻辑。

2. 生成按钮时直接绑定事件（无需依赖ID） #

在buildCurrentCodesButtons函数生成按钮的过程中，直接给按钮对象绑定点击事件，不用额外通过ID查找，也不会有引号问题。

示例代码：

function buildCurrentCodesButtons() {
  // 遍历currentArray生成按钮
  currentArray.forEach(item => {
    // 用jQuery创建按钮元素
    const $btn = $('<button>', {
      id: 'suspectbtn' + item.hashKey,
      text: 'Suspect' // 按钮显示的文字
    });

    // 直接给这个按钮绑定点击事件，此时可以直接访问当前item的数据
    $btn.click(function() {
      // 这里直接使用item，不用再从数组里查找
      console.log('点击按钮，对应数据:', item);
      // 执行你的业务逻辑，比如处理item中的数据
    });

    // 将按钮添加到页面的目标容器中（替换成你实际的容器选择器，比如#btn-container）
    $('#btn-container').append($btn);
  });
}

说明：这种方法在生成按钮的同时完成事件绑定，逻辑更紧凑，也避免了ID查找的麻烦。

3. 修复内嵌onclick的引号截断问题（不推荐，仅作备选） #

如果一定要用内嵌onclick属性，需要把数据转成JSON字符串并转义引号，避免截断。

示例代码：

function buildCurrentCodesButtons() {
  currentArray.forEach(item => {
    // 将数据转成JSON字符串，并把双引号替换为HTML实体（避免截断）
    const dataStr = JSON.stringify(item).replace(/"/g, '"');
    // 拼接按钮HTML，把转义后的字符串传入onclick函数
    const btnHtml = `<button id="suspectbtn${item.hashKey}" onclick="handleSuspectClick(${dataStr})">Suspect</button>`;
    
    // 将按钮添加到目标容器
    $('#btn-container').append(btnHtml);
  });
}

// 定义全局的点击处理函数
function handleSuspectClick(data) {
  console.log('点击按钮，对应数据:', data);
  // 执行你的业务逻辑
}

说明：这种方法需要处理字符串转义，容易出错，而且代码耦合度高，不推荐优先使用。

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