[英]How to properly escape double quotes in jquery
更新:通过删除逗号之间的空格,我成功摆脱了随机等号之一。但是,似乎在字符串中只要有空格,即用户名,就会插入“ =” return(firstName lastName)。知道为什么会这样做吗?而且它还在“> join ...”之前仍然插入了“ =”“”,考虑到那里没有空格,这很奇怪。
$("#ride").append('<div class= "style"><img src = "'
+ snapshot.val().id
+ '" style="width:68px;height:68px;"/><p>'
+ snapshot.val().user
+ '</p><ul class = "styling"><li>'
+ snapshot.val().when
+ ' '
+ snapshot.val().from
+ ' - '
+ snapshot.val().to
+ '</li><li>'
+ snapshot.val().comments
+ '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"'
+ snapshot.val().user
+ '\",\"'
+ snapshot.val().reference
+ '\")\">join this ride</button></ul></div>');
我正在使用jquery编写动态HTML内容。
data.forEach(function(snapshot) {
$("#ride").append('<div class= "style"><img src = "'
+ snapshot.val().id
+ '" style="width:68px;height:68px;"/><p>'
+ snapshot.val().user
+ '</p><ul class = "styling"><li>'
+ snapshot.val().when
+ ' '
+ snapshot.val().from
+ ' - '
+ snapshot.val().to
+ '</li><li>'
+ snapshot.val().comments
+ '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"'
+ snapshot.val().user
+ '\" , \"'
+ snapshot.val().reference
+ '\")">join this ride</button></ul></div>');
});
console.log('ID : ' + $("#ride").html());
});
这些是我的jquery代码创建的div。 当前,当我单击此div中的任一按钮时,我收到“未捕获的SyntaxError:意外的令牌}”消息:
<div class="style"><img src="https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg" style="width:68px;height:68px;">
<p>Liz</p>
<ul class="styling">
<li>Wed Mar 29 2017 07:00 AM - 09:00 PM</li>
<li>test 2 </li><button type="button" class="btn btn-outline-info" onclick="initMessenger(" liz="" smith "=" " ,=" " "-kfsqld0eras9ri4v9es ")"="">join this ride</button></ul>
</div>
<div class="style"><img src="https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg" style="width:68px;height:68px;">
<p>Liz</p>
<ul class="styling">
<li>Thu Mar 23 2017 02:00 AM - 05:30 AM</li>
<li>TEST THREE</li><button type="button" class="btn btn-outline-info" onclick="initMessenger(" liz="" smith "=" " ,=" " "-kfsvhs6q-x-bdhz8jfk ")"="">join this ride</button></ul>
</div>
为什么我的initMessenger到处都调用所有这些随机等号并加引号? 我如何摆脱它们?
为了避免逃生的噩梦,可以使用新的ES6模板文字
像这样
$("#ride").append(`
<div class="style">
<img src="${snapshot.val().id}" style="width:68px;height:68px;"/>
<p>${snapshot.val().user}</p>
<ul class="styling">
<li>${snapshot.val().when} ${snapshot.val().from} - ${snapshot.val().to}</li>
<li>snapshot.val().comments</li>
<button type="button" class="btn btn-outline-info" onclick="initMessenger('${snapshot.val().user}','${snapshot.val().reference}')">join this ride</button>
</ul>
</div>`);
现在无需转义任何字符,例如: onclick="initMessenger('${snapshot.val().user}','${snapshot.val().reference}')"
您似乎在这里加了一个双引号:
+ '\\")">join this ride</button></ul></div>');
因此,它形成了以下字符串:
onclick = "initMessenger("51234" , "997")">join this ride</button></ul></div>
(数字只是一些随机值)
如果您将字符串更改为此:
+ '\\")>join this ride</button></ul></div>');
输出看起来像这样,它应该可以正常工作:
onclick = "initMessenger("51234" , "997")>join this ride</button></ul></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.