jquery - 附加内容时转义引号问题答案

【问题标题】：jquery - escaping quotes issue when prepending contentjquery - 附加内容时转义引号问题
【发布时间】：2012-06-08 19:49:40
【问题描述】：

我正在尝试使用以下 sn-p：

$('#thirdPartyCheckoutButtons').prepend('<a href="https://www.resellerratings.com" onclick="window.open("https://seals.resellerratings.com/landing.php?seller=myID","name","height=760,width=780,scrollbars=1"); return false;"><img style="border:none;" src="//seals.resellerratings.com/seal.php?seller=myID" oncontextmenu="alert("Copying Prohibited by Law - ResellerRatings seal is a Trademark of All Enthusiast, Inc."); return false;" /></a><img src="https://www.myurl.com/hdsd834k.png"  style="float: left;margin-left: 180px;">');

它根本不显示..我尝试了这么多引用差异，我不明白！

【问题讨论】：

标签： javascript jquery escaping

【解决方案1】：

inner-inner 双引号破坏了您的 onclick 属性值。用单引号替换它们并转义它们。

...onclick="window.open(\'https://seals.resellerratings.com/landing.php?seller=myID\',\'name\',\'height=760,width=780,scrollbars=1\'); return false;"...

同样的事情发生在你的 oncontextmenu 事件上，执行同样的修复。

...oncontextmenu="alert(\'Copying Prohibited by Law - ResellerRatings seal is a Trademark of All Enthusiast, Inc.\'); return false;" />...

完整代码：

$('#thirdPartyCheckoutButtons').prepend('<a href="https://www.resellerratings.com" onclick="window.open(\'https://seals.resellerratings.com/landing.php?seller=myID\',\'name\',\'height=760,width=780,scrollbars=1\'); return false;"><img style="border:none;" src="//seals.resellerratings.com/seal.php?seller=myID" oncontextmenu="alert(\'Copying Prohibited by Law - ResellerRatings seal is a Trademark of All Enthusiast, Inc.\'); return false;" /></a><img src="https://www.myurl.com/hdsd834k.png"  style="float: left;margin-left: 180px;">');

【讨论】：

是一个HTML属性值； \ 是没有意义的。

【解决方案2】：

您在 prepend() 函数中的字符串由单引号分隔。这意味着您在该字符串中键入的每个单引号都必须用 .但是，这不是你的问题。您的问题在于无效的 HTML。这就是你所拥有的：

$('#thirdPartyCheckoutButtons').prepend('<a href="https://www.resellerratings.com" onclick="window.open("https://seals.resellerratings.com/landing.php?seller=myID","name","height=760,width=780,scrollbars=1"); return false;"><img style="border:none;" src="//seals.resellerratings.com/seal.php?seller=myID" oncontextmenu="alert("Copying Prohibited by Law - ResellerRatings seal is a Trademark of All Enthusiast, Inc."); return false;" /></a><img src="https://www.myurl.com/hdsd834k.png"  style="float: left;margin-left: 180px;">');

如果您注意到所有 HTML 属性值都由双引号分隔。但是，在您的 onclick="" 事件中，您再次使用双引号。您可以使用 ESCAPED 单引号来解决此冲突。您的 oncontextmenu="" 事件中也有同样的问题。

$('#thirdPartyCheckoutButtons').prepend('<a href="https://www.resellerratings.com" onclick="window.open(\'https://seals.resellerratings.com/landing.php?seller=myID\',\'name\',\'height=760,width=780,scrollbars=1\'); return false;"><img style="border:none;" src="//seals.resellerratings.com/seal.php?seller=myID" oncontextmenu="alert(\'Copying Prohibited by Law - ResellerRatings seal is a Trademark of All Enthusiast, Inc.\'); return false;" /></a><img src="https://www.myurl.com/hdsd834k.png"  style="float: left;margin-left: 180px;">');

以后避免这个问题的最简单方法是在 jQuery 函数调用之外构建字符串 (HTML)，然后将字符串作为变量传入。

【讨论】：