Layui layer组件报错：jquery Syntax error, unrecognized expression: #[object HTMLInputElement]

背景

项目是一个jsp写的前后端不分离的项目，需要加一个”弹出层“，要求兼容IE浏览器同时时间比较紧张，所以我选择用layui的layer组件来开发。layer组件的content参数我用的是模版字符串 ” “”来拼接弹窗内容,但是IE是不支持的，所以改为自己拼接弹窗模版字符串。这个时候就出现了问题

需求: 用layui实现一个弹出层效果
关键点：layer的content参数,content: ‘< div onclike=”test(’+‘1’+‘)”>’

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：
/!*
 如果是页面层
 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//字符串模版
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: "<div&gt;</div&gt;"
  });
});
/!*
 如果是iframe层
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});        

影响

出发DOM事件的时候会报错，事件绑定的函数也失去效果了

分析

由于控制台报错“jquery Syntax error”,所以我怀疑是jquery版本和layui内部引用的jqueyr版本冲突问题。但是我引用顺序调整后，还会报错，只能继续找。这个时候我发现报错内容还有一段话“unrecognized expression”（无法识别的表达式子），在整个实现弹出层的过程中，只有content参数中用到的表达式。经过一顿测试，发现是onclike事件函数穿参的时候字符串拼接的问题。所以我去掉函数的参数就解决了

小结

记住下次要认真阅读报错信息，很关键，节省很多时间

• IE不支持 “（模版字符串）

代码007普通

打赏 收藏 海报 链接