如何在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参数。

使用jQuery的eventData参数的示例：

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);
}

示范

Answer 2

更简单的方法是将新div附加到#test然后使用事件委托来绑定新添加的div click事件，如下所示：

$('#test').append("<div class='newDiv'>Show</div>");

$('#test').on('click','.newDiv',function() {
    alert("it's a test.");
});

Answer 3

反斜杠可用于转义特殊字符

<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>

这应该是有希望的，如果不是它应该帮助你开始