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属性。该按钮调用删除图像的功能（在从DB成功删除图像后）

成功删除图像后，将调用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);

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

1 个答案: