如何在jquery的append(),onclick(),alert()中一次转义单引号或双引号？

Question

当我用javascript开发我的html时,我有一个问题.

我最终想要的是HTML:

<div id="test">
<div onclick="alert("it's a test.")">Show</div>
</div>

但在代码中我希望它像这样实现:

<div id="test"></div>
<script>
var tmp="it's a test.";//be careful, there must be a single quote in this variable
$('#test').append("<div onclick='alert(\" "+tmp+" \")'>Show</div>");
</script>

在萤火虫中它显示:

<div id="test">
<div ")'="" test.="" a="" s="" onclick="alert(" it">Show</div>
</div>

所以我认为这是一个逃避问题.但我认为它至少有3个级别的深度.有人可以帮帮我吗？谢谢!

Answer 1

不要使用 jQuery 编写内联脚本。代替

$('#test').append("<div onclick='alert(\" "+tmp+" \")'>Show</div>");

和

$('<div>').click(function(){ alert(" "+tmp+" ") }).text('Show').appendTo('#test');

这边走

• 您没有在点击时评估代码
• 直接检测语法错误
• 你不会有引用转义的问题
• 代码更具可读性
• 你将有一个直接绑定，没有无用的选择器解析
• 当你需要一个变量时（例如temp），你不需要把它放在全局作用域中，它可以在元素添加的作用域中

要回答评论中的问题，您可以

• 使用中间闭包来封闭循环时的值（示例此处）
• 或者使用jQuery 的 click 函数eventData的参数。

使用 jQueryeventData参数的示例：

var names = ['A', 'B'];
for (var i=0; i<names.length; i++) {
  $('<div>').text('link '+(i+1)).click(names[i], function(e) {
    alert('Name : ' + e.data);
  }).appendTo(document.body);
}

示范