未在追加HTML中创建正斜线（'/'） - .append（）

Question

我试图将HTML部分追加到“alert”框中，除了附加HTML中的URL外，这是我使用jQuery附加的HTML代码。

var html = "Please follow the template provided into sample file and try again."; 
html += '<span onclick="window.location="\Static\SampleQuote.xlsx"> Click Here </span>To Download'; 
loadAlertPopupHTML("FAILED","Excel file parsing failed.",html); 

我试图与这answer的帮助，但我仍然没有得到确切的语法。

我尝试每一种：

html += '<span onclick="window.location="\\Static\\SampleQuote.xlsx"> Click Here </span>'; 

html += '<span onclick="window.location=""/" \Static\SampleQuote.xlsx "/"> 
Click Here </span>'; 

html += '<span onclick="window.location="\Static\SampleQuote.xlsx"> 
Click Here </span>'; 

但输出将是无斜线相同（/）：

<span onclick="window.location=" staticsamplequote.xlsx"=""> Click Here </span> 

您也可以尝试在这里作为一个例子：https://jsfiddle.net/smit_patel/exz6d1t3

Answer 1

问题是由于不匹配的报价都包裹在onclick属性和window.location分配。您需要在window.location作业中使用转义的单引号，并且还要跳过斜线。试试这个：

var html = "Please follow the template provided into sample file and try again. <br /><br />"; 
 
html += '<strong><span onclick="window.location=\'\\Static\\SampleQuote.xlsx\'" class="fa fa-download" style="color:#0055a5; font-size:15px; cursor:pointer;" title="Click to Download Sample Template"> Click Here </span> to download excel template Employee Census Form.</strong>'; 
 
$("#test").append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"></div>

更妙的是，只需使用标准<a />元素，因为它有没有谁已禁用JS用户的弊端相同的行为，而且是更容易获得。

var html = "Please follow the template provided into sample file and try again. <br /><br />"; 
html += '<strong><a href="\Static\SampleQuote.xlsx" class="fa fa-download" title="Click to Download Sample Template">Click Here</a> to download excel template Employee Census Form.</strong>'; 
$("#test").append(html); 

Answer 2

在js“\”用于转义序列。 所以用这样的

onclick="window.location="\\Static\\SampleQuote.xlsx" 

Answer 3

我已经改变了你的jsfiddle，就像下面和它的工作。

$("#test").append("Please follow the template provided into sample file and try again. <br /><br />"); 
$("#test").append('<strong><span onclick=window.location="/\Static/\SampleQuote.xlsx" class="fa fa-download" style="color:#0055a5; font-size:15px; cursor:pointer;" title="Click to Download Sample Template"> Click Here </span> to download excel template Employee Census Form.</strong>'); 
$("#test").append(html);