JS中拼接dom元素时，处理其事件传参（字符串参数）问题

Mr.var

已于 2022-07-18 11:07:58 修改

阅读量1.4k

点赞数 1

文章标签： javascript 前端开发语言

于 2022-07-13 10:12:50 首次发布

本文链接：https://blog.csdn.net/var200/article/details/125757256

版权

一、问题和原因

我们在做前后端数据交互时，往往需要在前端js写入动态的dom对象，例如下面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../../scripts/common/jquery-1.8.2.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="main_dom"></div>
	</body>
	
	<script>
	   $(function(){
		   var testNum = "javascript";
		   
		   var html = '<a οnclick="Test(' + testNum +')">'
		   + '测试传参</a>';
		   
		   $('#main_dom').append(html);
	   })
	   
	   function Test(num){
		   console.log(num)
	   }
	</script>
</html>

这里我们可以发现其中dom对象带有一个点击事件并传递了一个叫"javascript"的参数，此时我们触发点击事件打印一下这个参数会发现：
在这里插入图片描述
这是因为浏览器将"javascript"这个参数解析成了一个变量，而不是直接传递这个字符串，所以报错未定义。

二、解决方法

方法一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../../scripts/common/jquery-1.8.2.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="main_dom"></div>
	</body>
	
	<script>
	   $(function(){
		   var testNum = "javascript";
		   
		   var html = '<a οnclick="Test(\'' + testNum +'\')">'
		   + '测试传参</a>';
		   
		   $('#main_dom').append(html);
	   })
	   
	   function Test(num){
		   console.log(num)
	   }
	</script>
</html>

使用转义符 \ ，给变量添加引号，将变量转化为字符串。

在这里插入图片描述
方法二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../../scripts/common/jquery-1.8.2.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="main_dom"></div>
	</body>
	
	<script>
	   $(function(){
		   var testNum = "javascript";
		   
		   //注意：此行代码使用返单引号
		   var html = `<a οnclick="Test('${testNum}')">`
		   + '测试传参</a>';
		   
		   $('#main_dom').append(html);
	   })
	   
	   function Test(num){
		   console.log(num)
	   }
	</script>
</html>

使用es6新增的字符串语法${}，配合反单引号拼接起来

Mr.var

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中拼接dom元素时，处理其事件传参（字符串参数）问题

我们在做前后端数据交互时，往往需要在前端js写入动态的dom对象，例如下面代码：这里我们可以发现其中dom对象带有一个点击事件并传递了一个叫"javascript"的参数，此时我们触发点击事件打印一下这个参数会发现：这是因为浏览器将"javascript"这个参数解析成了一个变量，而不是直接传递这个字符串，所以报错未定义。使用转义符 \ ，给变量添加引号，将变量转化为字符串。......
复制链接

扫一扫