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）时，您不需要将其放在全局范围内，它可以在元素添加的范围内

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

使用中间闭包来封闭循环时的值（example here）
或使用jQuery's click function的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);
}

Demonstration

Answer 2

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

$('#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>

这应该有希望，如果没有它应该帮助你开始

如何在jquery的append（），onclick（），alert（）中一次转义单引号或双引号？

3 个答案: