js传参过长导致参数变形

随手记

 

问题重现：

代码：通过js动态生成表格，并赋予表格某个cell一个点击响应事件

 for (var i=0;i<data.length;i++){
                    src+="<tr>" +
                        "<td>"+data[i].id+"</td><td>"+data[i].name+"</td>" +
                        "<td>"+(data[i].sex==0?'男':'女')+"</td><td>"+data[i].age+"</td>" +
                        "<td><button class='button' onclick='gontoPatient("+(data[i].id).toString()+")' data="+data[i].id+">选择</button></td>" +
                        " </tr>";
                }



函数体：
    function gontoPatient(e) {
        e =e.toString();
        console.log(e)
        alert(e)
    }

生成的表格：

按照正常逻辑，点击选择时，应该弹出123456789012345678，但是运行起来却是这样的：

后面的678直接变成了680..。。

 

F12查看的源码，参数是正确的：

 

浏览器上的调试：

发现传过来的时候变形了，中间到底经历了什么。。。

之前一直没遇到过这种问题，猜想是因为参数过长导致的。于是把参数缩短，尝试下，发现结果没有变形。

 

 

解决办法：

尝试了很多办法，最后发现问题还是出在字符串的身上。

 

只要在传参时，参数前后加个 双引号 ，就行了。

<button class='button' onclick='gontoPatient(\""+(data[i].id).toString()+"\")' data="+data[i].id+">选择</button>