jquery ajax 响应未附加到我的 Div

Question

在我的 jquery ajax 响应之后，我正在尝试为我的页面创建几个 html 元素。我确实得到了正确的回复，但我希望能够创建一些元素来帮助显示我的回复。

我想我已经在 jquery 中创建了它们，但是在追加之后，新创建的元素不会追加到 div，但是如果我追加到表中它会起作用。请帮我找出我做错了什么。谢谢

下面是我的 HTML

        <h3>Interest</h3>
    <div>
        <p runat="server" id="pInterest">
            <asp:Button runat="server" ID="btnAddInterest" CssClass="btnAddCommunity" Text="Add Interest" OnClientClick="return false;" />
            <asp:Repeater runat="server" ID="rptOnlineCommunities" OnItemDataBound="rptOnlineCommunities_ItemDataBound">
                <HeaderTemplate>
                    <div id="tblUseCommunities" class="dvOnlineCommunityMain">
                </HeaderTemplate>
                <ItemTemplate>
                    <div runat="server" id="dvOnlineCommunity" class="dvOnlineCommunity">
                        <asp:Label runat="server" ID="lblOnlineCommunityDescription" CssClass="lblOnlineCommunityDescription"></asp:Label>

                        <p runat="server" id="pOnlineCommunityDetails"></p>

                        <a runat="server" id="linkOnlineCommunity" target="_blank"></a>
                        <p class="pCommunityBtns">
                            <asp:Button runat="server" ID="btnUpdateOnlineCommunity" CssClass="btnUpdateOnlineCommunity" Text="Update" OnClientClick="return false;" />
                            <asp:Button runat="server" ID="btnDeleteOnlineCommunity" CssClass="btnDeleteOnlineCommunity" Text="Delete" OnClientClick="return false;" />
                        </p>
                    </div>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <div runat="server" id="dvOnlineCommunity" class="dvOnlineCommunity">
                        <asp:Label runat="server" ID="lblOnlineCommunityDescription" CssClass="lblOnlineCommunityDescription"></asp:Label>
                        <p runat="server" id="pOnlineCommunityDetails"></p>
                        <a runat="server" id="linkOnlineCommunity" target="_blank"></a>
                        <p class="pCommunityBtns">
                            <asp:Button runat="server" ID="btnUpdateOnlineCommunity" CssClass="btnUpdateOnlineCommunity" Text="Update" OnClientClick="return false;" />
                            <asp:Button runat="server" ID="btnDeleteOnlineCommunity" CssClass="btnDeleteOnlineCommunity" Text="Delete" OnClientClick="return false;" />
                        </p>
                    </div>
                </AlternatingItemTemplate>
                <FooterTemplate>
                    </div>                   
                </FooterTemplate>
            </asp:Repeater>
        </p>

下面的javascript函数

function UpdateOnlineCommunity(communityId, communityName, communityDescription, communityLink) {
var serviceData = JSON.stringify({
    'communityId': communityId,
    'communityName': communityName,
    'communityDescription': communityDescription,
    'communityLink': communityLink
});
$.ajax({
    type: "POST",
    url: "PresentationService.asmx/UpdateUserCommunity",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: serviceData,
    success: function(response) {
        var data = response.d;

        var dvOnlineCommunityMain = $("#dvOnlineCommunityMain");

        var dvOnlineCommunity = $('<div/>', {
            id: "dvOnlineCommunity",
            class: "dvOnlineCommunity",
            "data-id": data.CommunityID
        });

        var lblOnlineCommunityDescription = $('<span/>', {
            id: "lblOnlineCommunityDescription",
            text: data.Description
        });

        var pOnlineCommunityDetails = $('<p/>', {
            id: "pOnlineCommunityDetails",
            text: data.Detail
        });

        var linkOnlineCommunity = $('<a/>', {
            id : "linkOnlineCommunity",
            href : data.Link,
            text: data.Link
        });

        var btnUpdateOnlineCommunity = $('<button/>', {
            id: "btnUpdateOnlineCommunity",
            class: "btnUpdateOnlineCommunity",
            text: "Update"
        });

        var btnDeleteOnlineCommunity = $('<button/>', {
            id: "btnDeleteOnlineCommunity",
            class: "btnUpdateOnlineCommunity",
            text: "Delete"
        });

        dvOnlineCommunity.append(lblOnlineCommunityDescription, pOnlineCommunityDetails, linkOnlineCommunity,
            btnUpdateOnlineCommunity, btnDeleteOnlineCommunity);

        dvOnlineCommunityMain.append(dvOnlineCommunity);
    },
    error: function(response) {
        alert(response);
    }
});
}

Answer 1

您将id 选择器用作dvOnlineCommunityMain，但在您的html 中它被定义为class。因此问题。

 <div id="tblUseCommunities" class="dvOnlineCommunityMain">

所以，只需更改选择器以适应类..

  var dvOnlineCommunityMain = $(".dvOnlineCommunityMain");