如何引用jQuery .append（）添加的元素

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

使用AJAX調用檢索url和id屬性。 該按鈕調用刪除圖像的功能（從數據庫成功刪除圖像之后）

成功刪除圖像后，將調用succes：函數：

.......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 OR類，但是它什么也沒做。 當我檢查源代碼時，在任何地方都找不到附加的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);