Jquery 使用ajax调用的数据列表（未能在'；节点'；上执行'；appendChild'；：新的子元素包含父元素）
我根本不知道为什么会发生这种事。同样的代码也适用于GridView控件，但不适用于DataList控件。下面给出的代码用于使用ajax调用加载DataList控件的asp.net网页（数据绑定使用ajax完成） 发生以下错误：未捕获DomeException:未能在“节点”上执行“appendChild”：新的子元素包含父元素 错误发生在页面加载时Jquery 使用ajax调用的数据列表（未能在'；节点'；上执行'；appendChild'；：新的子元素包含父元素）,jquery,asp.net,ajax,webforms,datalist,Jquery,Asp.net,Ajax,Webforms,Datalist,我根本不知道为什么会发生这种事。同样的代码也适用于GridView控件，但不适用于DataList控件。下面给出的代码用于使用ajax调用加载DataList控件的asp.net网页（数据绑定使用ajax完成） 发生以下错误：未捕获DomeException:未能在“节点”上执行“appendChild”：新的子元素包含父元素 错误发生在页面加载时 <%@ Page Language="C#" AutoEventWireup="true" CodeB
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ADataList.aspx.cs" Inherits="WebServices.controls.ADataList" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate>
<tr>
<th>Customer ID</th>
<th>Name</th>
<th>Country</th>
<th>Actions</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td id="CustomerId" style="margin-left: 160px">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CustomerId") %>'></asp:Label>
</td>
<td id="Name">
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
<asp:TextBox Text='<%# Eval("Name") %>' runat="server" Style="display: none" />
</td>
<td id="Country">
<asp:Label ID="Label3" runat="server" Text='<%# Eval("Country") %>'></asp:Label>
<asp:TextBox Text='<%# Eval("Country") %>' runat="server" Style="display: none" />
</td>
<td>
<asp:LinkButton Text="Edit" runat="server" CssClass="Edit" />
<asp:LinkButton Text="Update" runat="server" CssClass="Update" Style="display: none" />
<asp:LinkButton Text="Cancel" runat="server" CssClass="Cancel" Style="display: none" />
<asp:LinkButton Text="Delete" runat="server" CssClass="Delete" />
</td>
</tr>
</ItemTemplate>
</asp:DataList>
<table style="border-collapse: collapse">
<tr>
<td style="width: 150px">Name:<br />
<asp:TextBox ID="txtName" runat="server" Width="140" />
</td>
<td style="width: 150px">Country:<br />
<asp:TextBox ID="txtCountry" runat="server" Width="140" />
</td>
<td style="width: 100px">
<br />
<asp:Button ID="btnAdd" runat="server" Text="Add" />
</td>
</tr>
</table>
</div>
</form>
<script>
$(function () {
$.ajax({
type: "POST",
url: "service.asmx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess
});
});
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Table");
var row = $("[id*=DataList1] tr:last-child");
if (customers.length > 0) {
$.each(customers, function () {
AppendRow(row, $(this).find("CustomerId").text(), $(this).find("Name").text(), $(this).find("Country").text()),
row = $("[id*=DataList1] tr:last-child").clone(true);
});
} else {
row.find(".Edit").hide();
row.find(".Delete").hide();
row.find("span").html(' ');
}
}
function AppendRow(row, customerId, name, country) {
//Bind CustomerId.
$("#CustomerId", row).find("span").html(customerId);
//Bind Name.
$("#Name", row).find("span").html(name);
$("#Name", row).find("input").val(name);
//Bind Country.
$("#Country", row).find("span").html(country);
$("#Country", row).find("input").val(country);
row.find(".Edit").show();
row.find(".Delete").show();
$("[id*=DataList1]").append(row); //This line is giving error on running .each
}
//Add event handler.
$("body").on("click", "[id*=btnAdd]", function () {
var txtName = $("[id*=txtName]");
var txtCountry = $("[id*=txtCountry]");
$.ajax({
type: "POST",
url: "service.asmx/InsertCustomer",
data: '{name: "' + txtName.val() + '", country: "' + txtCountry.val() + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var row = $("[id*=DataList1] tr:last-child");
if ($("[id*=DataList1] tr:last-child span").eq(0).html() !== " ") {
row = row.clone();
}
AppendRow(row, response.d, txtName.val(), txtCountry.val());
txtName.val("");
txtCountry.val("");
}
});
return false;
});
//Edit event handler.
$("body").on("click", "[id*=DataList1] .Edit", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find("input").length > 0) {
$(this).find("input").show();
$(this).find("span").hide();
}
});
row.find(".Update").show();
row.find(".Cancel").show();
row.find(".Delete").hide();
$(this).hide();
return false;
});
//Update event handler.
$("body").on("click", "[id*=DataList1] .Update", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find("input").length > 0) {
var span = $(this).find("span");
var input = $(this).find("input");
span.html(input.val());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Delete").show();
row.find(".Cancel").hide();
$(this).hide();
var customerId = row.find("#CustomerId").find("span").html();
var name = row.find("#Name").find("span").html();
var country = row.find("#Country").find("span").html();
$.ajax({
type: "POST",
url: "service.asmx/UpdateCustomer",
data: '{customerId: ' + customerId + ', name: "' + name + '", country: "' + country + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json"
});
return false;
});
//Cancel event handler.
$("body").on("click", "[id*=DataList1] .Cancel", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find("input").length > 0) {
var span = $(this).find("span");
var input = $(this).find("input");
input.val(span.html());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Delete").show();
row.find(".Update").hide();
$(this).hide();
return false;
});
//Delete event handler.
$("body").on("click", "[id*=DataList1] .Delete", function () {
if (confirm("Do you want to delete this row?")) {
var row = $(this).closest("tr");
var customerId = row.find("span").html();
$.ajax({
type: "POST",
url: "service.asmx/DeleteCustomer",
data: '{customerId: ' + customerId + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if ($("[id*=DataList1] tr").length > 2) {
row.remove();
} else {
row.find(".Edit").hide();
row.find(".Delete").hide();
row.find("span").html(' ');
}
}
});
}
return false;
});
</script>
</body>
</html>
请在页面加载@CarstenLøvboandersen时，在单击“添加”或“添加”时指定错误发生的时间。我认为您没有创建新行。您在var row=…
处获得最后一行，然后在给出错误的行上尝试附加它，但它当然已经在那里了，因此错误是新的子元素包含父元素。