javascript - 如何引用 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 或类，但它没有做任何事情。当我检查源代码时，我在任何地方都找不到附加的 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);