如何同时在jquery的append()、onclick()和alert()中转义单引号或双引号？

Question

我是一名有用的助手，以下是您需要翻译的内容：

我在开发带有JavaScript的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>

在 Firebug 中显示如下：

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

所以我认为这是一个转义问题。但是我认为它至少有3个层次的深度。 有人可以帮我吗？谢谢！

- Luc

---

使用jQuery时为什么要使用onclick=...？ - Salman A

因为这个代码块在一个for循环中，所以这个页面上的代码是完全动态的。 - Luc

你使用闭包吧！ - Salman A

@SalmanA 或者 click 的 data 参数可以使它更简单（请参见我的答案）。 - Denys Séguret

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

Demonstration

- Denys Séguret

---

但是如果这个代码块在一个数组的for循环中，而变量temp又依赖于数组中的变量呢？ - Luc

@Luc 然后使用中间闭包来保护它。这样做仍然比使用字符串字面量编写的代码要干净得多。 - Denys Séguret

我的情况比我描述的更复杂。它在一个ul中的li内部，有许多div。实际上，它是一个<a>触发onclick事件。非常感谢。 - Luc

Answer 2

反斜杠可以用来转义特殊字符

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

希望这可以起到作用，如果不行的话，它应该能帮助您入门。

- Brian H

Answer 3

更简单的方法是将新的 div 添加到你的 #test 中，然后使用事件委托来绑定点击事件到你新添加的 div 上，像这样：

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

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

- Felix