空白导致不正确的HTML

Question

我使用下面的JavaScript代码<tr>行追加到<table>：

<script type="text/javascript"> 
    function addRow() { 
     var filesName = 'Document Draft.png' 
     var newRow = "<tr><td>td Data 1</td><td><a onclick=deleteDocument(this,'" + filesName + "')>Delete</a></td></tr>"; 
     $("#idDocList").append(newRow); 
    } 
</script> 

该代码添加一个tr到table。

问题：但问题是，filesName有一个空白这是对DOM渲染错误如下：

<tr> 
    <td>td Data 1</td> 
    <td> 
     <a onclick="deleteDocument(this,'Document" Draft.png')"">Delete</a> 
    </td> 
</tr> 

所以onclick不起作用，因为呈现的HTML是

onclick="deleteDocument(this,'Document" Draft.png') 

正如您在上面的行中可以看到的，它将花费（“）而不是空白。如何解决它？

Answer 1

既然你有onclick属性值空间，你应该换同值，例如，""：

...<a onclick=\"deleteDocument(this,'" + filesName + "')\">... 

Fiddle example。

而是内嵌JS onclick=""（不建议使用这种nowdays），你可以使用jQuery的.on("click")：

var filesName = 'Document Draft.png'; 
var newRow = "<tr><td>td Data 1</td><td><a class='delete'>Delete</a></td></tr>"; 
$("#idDocList").append(newRow); 

$('#idDocList').on('click', ".delete", function() 
{ 
    deleteDocument(this, filesName); 
}); 

Fiddle example。