2011-09-20 81 views
0

爲什麼drawUploader()不會將html附加到divdrawUploader?!jQuery .append()函數不會插入DIV

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ajax File Upload</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

function drawUploader() 
{ 

    $("#drawUploader").append("<div id=\"upload_wrapper\">"+ 
          "<form id=\"upload\" name=\"upload\" enctype=\"multipart/form-data' method='post' action='index.php' target='upload_target'>"+ 
          "<input name='uploaded_file' type='file' size='30' id='uploaded_file' />"+ 
          "<input id='sent' name='sent' type='submit' value='Upload' />"+ 
          "</form>"+ 
          "</div>"+ 
          "<div id='loading' style='background:url(ajax-loader.gif) no-repeat left; height:50px; width:370px; display:none;'>"+ 
          "<p style='margin-left:40px; padding-top:15px;'>Uploading File... Please wait</p>"+ 
          "</div>"+ 
          "<div id='image_wrapper' style='display:none;'><img id='preview' src='' /></div>" 
          ); 
}  
</script> 
</head> 

<body> 
<input type="button" onclick="drawUploader()" value="start uplaod" /> 
<div id="drawUploader"></div> 
<iframe id="upload_target" name="upload_target" src="" style="width:10px; height:10px; display:none"></iframe> 
</body> 
</html> 
+0

取而代之的是什麼? –

+0

沒事:D !!!!! – Adham

+0

你應該真的考慮移動到這裏的模板模式。然後只需調用'$('#myTemplate')。clone()'來創建一個新的HTML實例並插入它。 – Tejs

回答

0

您的表單屬性中有一個不匹配的引號。試試這個:是的ENCTYPE

function drawUploader() { 
    $("#drawUploader").append("<div id=\"upload_wrapper\">" + "<form id=\"upload\" name=\"upload\" enctype='multipart/form-data' method='post' action='index.php' target='upload_target'>" + "<input name='uploaded_file' type='file' size='30' id='uploaded_file' />" + "<input id='sent' name='sent' type='submit' value='Upload' />" + "</form>" + "</div>" + "<div id='loading' style='background:url(ajax-loader.gif) no-repeat left; height:50px; width:370px; display:none;'>" + "<p style='margin-left:40px; padding-top:15px;'>Uploading File... Please wait</p>" + "</div>" + "<div id='image_wrapper' style='display:none;'><img id='preview' src='' /></div>"); 
} 

錯誤屬性

0

<form>元素格式不正確。如果你在Chrome中使用開發工具,你會看到<div> upload_wrapper正在被添加,但其他的都沒有。

將所有\"更改爲單個',它工作正常。