向jQuery函数传递多个字符串参数时遇到问题

嘿，我太懂这种踩坑的感觉了！点击表格行触发jQuery函数传参时在Chrome报错，大概率是引号冲突或者参数转义不当导致的，咱们来一步步解决：

1. 先排查最常见的引号嵌套问题 #

如果你的HTML里是用内联onclick调用函数，很容易出现引号嵌套冲突。比如你可能写了这样的代码：

<tr onclick="myFunc("张三", "北京")">...</tr>

这时候Chrome会把第一个"当成onclick属性的结束，后面的代码直接语法报错！

解决方法很简单：

• 用单引号包裹函数调用，参数用双引号：

  <tr onclick='myFunc("张三", "北京")'>...</tr>
  

• 或者转义参数里的双引号：

  <tr onclick="myFunc(&quot;张三&quot;, &quot;北京&quot;)">...</tr>
  

2. 推荐更稳妥的事件绑定方式（避免转义麻烦） #

如果参数里包含特殊字符（比如单引号、换行、斜杠），内联写法的转义会非常麻烦，这时候直接用jQuery绑定事件+data属性存参数是最优解：

步骤1：HTML里用data属性存储参数 #

<tr data-name="张三" data-city="北京">...</tr>

步骤2：jQuery绑定点击事件并获取参数 #

// 给所有表格行绑定点击事件
$('table tr').on('click', function() {
  // 从当前行的data属性里取参数
  var name = $(this).data('name');
  var city = $(this).data('city');
  // 调用你的函数
  myFunc(name, city);
});

这种方式完全不用处理引号冲突，哪怕参数里有特殊字符也能正常传递，而且代码更易维护。

3. 额外检查函数作用域 #

如果你的myFunc是在某个闭包或者特定作用域里定义的，内联onclick可能找不到这个函数（因为内联事件的作用域是全局）。用jQuery绑定事件的话，函数能在当前脚本的作用域里正常访问，也能避免这个问题。

试试上面的方法，应该就能解决Chrome里的报错啦！

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