Question

我使用此功能將圖像添加到一個div元素添加如何引用元素：

function pasteImages(url,id) { 

    jQuery("#photodiv").append("<div id='photoid"+ id +"'>") 
    jQuery("#photodiv").append("<img src=" + url + " height='140' width='140'>"); 
    jQuery("#photodiv").append("<button type='button' onclick='deleteImage("+ id + ");'>Verwijderen</button>"); 
    jQuery("#photodiv").append("</div>"); 
} 

URL和id屬性使用AJAX調用檢索。該按鈕調用一個函數刪除的圖像（後的圖像被成功地從數據庫中刪除）

圖像被成功刪除了更迭之後：函數被調用：

.......success: function(data) // A function to be called if request succeeds 
      { 
       var photoarray = JSON.parse(data); 

       var photoid2remove = "#photoid" + photoarray[0].photoid; 
       jQuery(photoid2remove).empty(); 
      } 

一切工作正常，但沒有被刪除。我試過一個靜態的ID或類，但它沒有做任何事情。當我檢查源時，我無法在任何地方找到附加的div。那麼我怎樣才能引用我用第一個函數添加的div？

任何線索？

Answer 1

append調用中未封閉的HTML標籤會自動給出關閉標籤。因此，代碼

jQuery("#photodiv").append("<div id='photoid"+ id +"'>") 

相同

jQuery("#photodiv").append("<div id='photoid"+ id +"'></div>") 

因此，你的<img>和<button>被附加到#photodiv元素，而不是新創建<div>。刪除<div>不會刪除其他元素，因爲它們不在<div>中。

必須要麼把所有的HTML到一個單一的append電話，或使用jQuery函數創建元素，並呼籲那些append：

var newDiv = jQuery("<div>", { id: "photoid"+ id }); 
var newImg = jQuery("<img>", { src:url, height:140, width:140 }); 
var newButton = jQuery("<button>", { type:'button', text: "Verwijderen", onclick: "deleteImage("+ id + ");" }); 

newDiv.append(newImg); 
newDiv.append(newButton); 

jQuery("#photodiv").append(newDiv);