点击动态渲染的checkbox控制台输出[object Object]，JSON.stringify无效如何解决

• 你在拼接onclick事件的HTML字符串时，直接将mydata.layers[i]这个JS对象和字符串做拼接运算，JS会自动调用对象的toString()方法，得到的结果就是固定字符串[object Object]。最终渲染到DOM里的onclick代码实际是window.loadFL("[object Object]")，所以你拿到的参数永远是这个字符串，自然看不到原对象的属性，哪怕调用JSON.stringify也解析不出有效内容。

有两种常用方案可根据场景选择：

方案1：拼接前先把对象转成合法JSON字符串并转义引号 #

如果要继续使用内联onclick写法，需要先把对象序列化成JSON，再转义JSON内的双引号避免和HTML属性的引号冲突：

function XX(){
  var mydata = JSON.parse(data)            
  subjects = []
  for (var i = 0; i < mydata.layers.length; i++) {
    theID = mydata.layers[i].name                   
    subjects[i] = mydata.layers[i].subject
    // 序列化对象并转义双引号
    const layerParam = JSON.stringify(mydata.layers[i]).replace(/"/g, '&quot;')
    if (!thecontent[subjects[i]]) {
      thecontent[subjects[i]] = '<input type="checkbox" id="' + theID + '" onclick=\'window.loadFL(' + layerParam + ')\'>'
    } else {
      thecontent[subjects[i]] += '<input type="checkbox" id="' + theID + '" onclick=\'window.loadFL(' +  layerParam + ')\'>'
    }                   
    thecontent[subjects[i]] += '<label for="' + theID + '">&nbsp;' + mydata.layers[i].name + '</label><br>'
  }               
  for (k = 0; k < subjects.length; k++) {
    document.getElementById(subjects[k]).innerHTML = thecontent[subjects[k]] + '<br>'
  }                
}

window.loadFL = function (theresponse) {
  console.log(theresponse);
}

方案2：改用事件绑定（更推荐） #

内联事件拼接字符串很容易出现引号转义问题，更稳妥的方式是放弃内联onclick，渲染完元素后统一绑定事件：

function XX(){
  var mydata = JSON.parse(data)            
  subjects = []
  // 新增map存储layer数据，用checkbox的id做索引
  const layerMap = new Map()
  for (var i = 0; i < mydata.layers.length; i++) {
    const layer = mydata.layers[i]
    theID = layer.name
    layerMap.set(theID, layer)                 
    subjects[i] = layer.subject
    // 去掉内联onclick，加自定义类标识
    if (!thecontent[subjects[i]]) {
      thecontent[subjects[i]] = '<input type="checkbox" class="layer-ck" id="' + theID + '">'
    } else {
      thecontent[subjects[i]] += '<input type="checkbox" class="layer-ck" id="' + theID + '">'
    }                   
    thecontent[subjects[i]] += '<label for="' + theID + '">&nbsp;' + layer.name + '</label><br>'
  }               
  for (k = 0; k < subjects.length; k++) {
    document.getElementById(subjects[k]).innerHTML = thecontent[subjects[k]] + '<br>'
  }
  // 统一绑定点击事件
  document.querySelectorAll('.layer-ck').forEach(ck => {
    ck.addEventListener('click', () => {
      window.loadFL(layerMap.get(ck.id))
    })
  })
}

window.loadFL = function (theresponse) {
  console.log(theresponse);
}

该方案完全规避了字符串转义问题，后续维护也更简单。

内容的提问来源于stack exchange，提问作者engineer who loves coding