javascript 如何一次在jquery的append()、onclick()、alert()中转义单引号或双引号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21382698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to escape single quotes or double quotes within jquery's append(), onclick(), alert() at one time?
提问by Luc
I have a question when i develop my html with javascript.
当我用 javascript 开发我的 html 时，我有一个问题。
What finally I want in html is:
最后我想要的 html 是：
<div id="test">
<div onclick="alert("it's a test.")">Show</div>
</div>
But in code I want it be realized like this:
但在代码中我希望它是这样实现的：
<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>
In firebug it shows:
在萤火虫它显示：
<div id="test">
<div ")'="" test.="" a="" s="" onclick="alert(" it">Show</div>
</div>
So i think it's an escaping problem. But I think it has minimum 3 levels of depth. Anyone can help me? Thanks!
所以我认为这是一个逃避问题。但我认为它至少有 3 个深度级别。任何人都可以帮助我吗？谢谢！
采纳答案by Denys Séguret
Don't use jQuery to write inlined script. Replace
不要使用 jQuery 编写内联脚本。代替
$('#test').append("<div onclick='alert(\" "+tmp+" \")'>Show</div>");
with
和
$('<div>').click(function(){ alert(" "+tmp+" ") }).text('Show').appendTo('#test');
This way
这条路
- you don't eval the code on click
- syntax errors are direcly detected
- you won't have quote escaping problem
- the code is more readable
- you'll have a direct binding, without useless selector resolution
- when you need a variable (for example
temp), you don't need to put it in the global scope, it can be in the scope of the element addition
- 你不会在点击时评估代码
- 直接检测语法错误
- 你不会有报价转义问题
- 代码更具可读性
- 你将有一个直接绑定，没有无用的选择器分辨率
- 当你需要一个变量时（例如
temp），你不需要把它放在全局范围内，它可以在元素添加的范围内
To answer your question in comment, you can either
要在评论中回答您的问题，您可以
- use an intermediate closure to enclose the value at the time of looping (example here)
- or use the
eventDataargument of jQuery's click function.
- 在循环时使用中间闭包将值括起来（示例here）
- 或者使用jQuery 的 click 函数的
eventData参数。
Example of using jQuery's eventDataargument :
使用 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);
}
回答by Felix
An easier way is to append new divto your #testthen use event delegation to bind click event for your newly added divlike this:
一种更简单的方法是将 new 附加div到您的#test然后使用事件委托来绑定您新添加的点击事件，div如下所示：
$('#test').append("<div class='newDiv'>Show</div>");
$('#test').on('click','.newDiv',function() {
alert("it's a test.");
});
回答by Brian H
Backslashes can be used to escape special characters
反斜杠可用于转义特殊字符
<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>
That should work hopefully, if not it should help you get started
这应该很有希望，如果没有，它应该可以帮助您入门
