jquery - escaping quotes issue when prepending con

2019-08-19 07:30发布

问题:

I'm trying to use the following snippet:

$('#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;">');

It isn't displaying at all.. I've tried so many quote differences, I don't get it!

回答1:

the inner-inner double quotes are breaking your onclick attribute value. Replace them with single quotes and escape them.

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

The same thing happens on your oncontextmenu event, perform the same fix.

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

full code:

$('#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;">');​


回答2:

Your string in the prepend() function is delimited by single quotes. This means that every single quote you type inside of that string must be escaped by a . However, this is not your problem. Your problem lies with invalid HTML. This is what you have:

$('#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;">');

If you notice all of your HTML attribute values are delimited by double-quotes. However, in your onclick="" event, you are using double-quotes again. You can use ESCAPED single-quotes to remedy this collision. You also have the same problem in your oncontextmenu="" event.

$('#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;">');

The easiest way to avoid this problem in the future is to build the string (HTML) outside the jQuery function call and then pass the string in as a variable.