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

I have a question when i develop my html with javascript.

当我用javascript开发html时，我有一个问题。

What finally I want in html is:

最后，我想要的是:

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

在firebug节目:

<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层深度。任何人都可以帮我吗?谢谢!

3 个解决方案

#1

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 eventData argument of jQuery's click function.
或者使用jQuery的click函数的eventData参数。

Example of using jQuery's eventData argument :

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

示范

#2

An easier way is to append new div to your #test then use event delegation to bind click event for your newly added div like this:

一个更简单的方法是将新的div添加到#测试中，然后使用事件委托来绑定新添加的div的单击事件，如下所示:

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

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

#3

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

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

#1