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);