jQuery .append(html) 命令附加错误答案

【问题标题】：jQuery .append(html) command appending incorrectlyjQuery .append(html) 命令附加错误
【发布时间】：2023-04-05 13:13:01
【问题描述】：

我正在使用 jQuery/Ajax 调用将部分视图附加到表中。页面加载时，会正确创建局部视图。但是，一旦使用尝试将另一个项目附加到表中，尽管使用了完全相同的局部视图，但格式不正确。

这是桌子。加载时，项目已正确加载到页面上，如下图所示：

     <table id="fixedRows">
     <thead>
        <tr>
           <th>State Code</th>
           <th>Agent ID</th>
           <th></th>
           <th></th>
        </tr>
    </thead>
    <tbody>    
    @foreach (var item in Model.BankListAgentId)
    {                    
        if (!String.IsNullOrWhiteSpace(item.AgentId) && item.FixedOrVariable.Equals("F"))
        {
            @Html.EditorFor(model => item, "FixedPartialView")                     
        }
    }
</tbody>
</table>
<br />
<a href="#" class="addFixed">Add Another</a>

单击Add another 链接后，此jQuery/Ajax 调用将被激活

<script type="text/javascript">
    $(document).ready(function () {

        $(".addFixed").click(function () {
            //alert('test');
            event.preventDefault();        
            $.ajax({
                url: '@Url.Action("BlankFixedRow", "BankListMaster")',
                cache: false,
                success: function (html) { $("#fixedRows").append(html); }
            });
        });

        $("#addVariable").click(function () {
            event.preventDefault();
            $.ajax({
                url: '@Url.Action("BlankFixedRow", "BankListMaster")',
                cache: false,
                success: function (html) { $("#variableRows").append(html); }
            });
        });

    });


</script>

那个jQuery从控制器调用这个方法

    public ViewResult BlankFixedRow()
    {
        SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" });
        ViewBag.StateCodeList = tmpList;

        return View("FixedPartialView", new BankListAgentId());
    }

这称为局部视图编辑（一些人注意到<tr> 中缺少id 标签，这只是这篇文章的复制/粘贴错误，实际代码有id 标签）

    @model Monet.Models.BankListAgentId

@{
    Layout = null;
}
    @using (Html.BeginCollectionItem("BankListAgentId"))
    {
        <tr id="item-@Model.AgentId">
            <td>
                @Html.DropDownListFor(model => model.StateCode,
                    (SelectList)ViewBag.StateCodeList, Model.StateCode)
            </td>
            <td>
                @Html.EditorFor(model => model.AgentId)
                @Html.ValidationMessageFor(model => model.AgentId)
            </td>
            <td>
                <a href="#" class="deleteRow">delete</a>
            </td>
            @*<td><a href="#" onclick="$('#item-@Model.AgentId').parent().remove();" style="float:right;">Delete</a></td>*@
        </tr>
    }

这与页面首次加载时调用的局部视图相同，这也是我对点击Add another 链接后的最终结果看起来像这样感到困惑的部分原因

编辑

如果你点击了两次Add another 链接，这就是结果

编辑

我尝试了以下 jQuery sucess 命令，但没有成功

success: function (html) { $("#fixedRows > tbody:last").append(html); }
success: function (html) { $("#fixedRows tr:last").after(html); }
success: function (html) { $("#fixedRows  > tbody").append(html); }

这是单击Add another 链接后呈现的HTML。我在下面的表单中包含了开头的<form> 标记，以表明找不到新行。

<form action="/BankListMaster/Edit/11" method="post">        
    <fieldset>
        <legend>Stat(s) Fixed</legend>
        <table id="fixedRows">
            <tr>
                <th>State Code</th>
                <th>Agent ID</th>
                <th></th>
                <th></th>
            </tr>

            <tr id="item-1164998320">
                <td>
                    <select id="item_StateCode" name="item.StateCode"><option value="">HI</option>
                        <option>AL</option>
                        ..
                        <option>WY</option>
                    </select>
                </td>
                <td>
                    <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998320" />
                    <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
                </td>
                <td>
                    <a href="#" class="deleteRow">delete</a>
                </td>
            </tr>    
            <tr id="item-1164998219">
                <td>
                    <select id="item_StateCode" name="item.StateCode">
                        <option value="">HI</option>
                        <option>AL</option>
                        ..
                        <option>WY</option>
                    </select>
                </td>
                <td>
                    <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998219" />
                    <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
                </td>
                <td>
                    <a href="#" class="deleteRow">delete</a>
                </td>
            </tr>    
            <tr id="item-0352926603">
                <td>
                    <select id="item_StateCode" name="item.StateCode">
                        <option value="">GA</option>
                        <option>AL</option>
                        ..
                        <option>WY</option>
                    </select>
                </td>
                <td>
                    <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="0352926603" />
                    <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
                </td>
                <td>
                    <a href="#" class="deleteRow">delete</a>
                </td>
            </tr>            
        </table>
        <br />
        <a href="#" class="addFixed">Add Another</a>
    </fieldset>
</form>     
<a href="#" class="addFixed">Add Another</a>
<form action="/BankListMaster/Edit/11" method="post">

编辑

这是单击Add Another 链接后Chrome 调试器中表格的屏幕截图。如您所见，从表中提取的数据已正确加载到各自的<tr> 标记中，但是空行（通过与其余部分相同的部分视图发送）没有任何相同的表元素。然而，下面的屏幕截图显示了响应，其中确实包含 <tr> 标记

编辑

我在success Ajax 函数中添加了一个console.log(html) 行，所以它现在变为

            success: function (html) {
                console.log(html);
                $("#fixedRows > tbody").append(html);
            }

这是控制台输出（为便于阅读而编辑的状态）

<input type="hidden" name="BankListAgentId.index" autocomplete="off" value="3f7e0a92-8f20-4350-a188-0725919f9558" />
        <tr>
            <td>
                <select id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__StateCode" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].StateCode">
                    <option>AL</option>
                    ..
                    <option>WY</option>
                </select>
            </td>
            <td>
                <input class="text-box single-line" id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__AgentId" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].AgentId" type="text" value="" />                 
            </td>
            <td>
                <a href="javascript:void(0)" class="deleteRow">delete</a>
            </td>               
        </tr>

【问题讨论】：

带有id #variableRows 的元素在哪里？它不在您的 HTML 中。
有两个相同的表，我把它省略了，因为我现在正在修复第一个。当前的问题特定于 #fixedRows 表。
可能是您的<tr> 和<td> 在您追加之前被剥离。 AJAX 调用返回的原始 HTML 是什么样的？
另外，您的部分正在生成所有 <tr>s 以及“1”的 id。一个文档中不能有重复的ids。
对不起，<tr> id 来自我正在调试的东西。我会删除它。

标签： ajax asp.net-mvc asp.net-mvc-3 jquery

【解决方案1】：

真是一场噩梦……

首先，在 Chrome 的调试器中返回为可查看的 HTML 很好，但是当我单击页面的“查看源代码”时，除了最初加载的内容外，我什么也看不到。找到this post后发现这是正常的。然后我使用this Chrome add-on 终于看到<tr> 和<td> 标签被剥离了。通过简单地在 append 语句中添加一个开始和结束标记，我将返回的项目附加到表中。

    $(".addFixed").click(function () {
        $.ajax({
            url: '@Url.Action("BlankFixedRow", "BankListMaster")',
            dataType: 'html',
            cache: false,
            success: function (html) {
                $("#fixedRows > tbody").append('<tr>' + html + '</tr>');
            }
        });
    });

【讨论】：

为什么TR和TD被删除了，我也遇到类似的问题，找不到原因。

【解决方案2】：

我在这里看到了一些东西。您在某些代码中引用了<tbody>，但我在页面的任何地方都看不到它。所以首先我建议使用<thead> 和<tbody>。在您的部分视图中，我看到 <tr "item-@Model.AgentId"> 应该有一个 id。

您还应该删除 onclick 处理程序和删除按钮，并将其与 JavaScript 的其余部分一起放入。改为在您的删除链接上设置一个类。

对于不需要 url 并且仅用于附加 JavaScript 处理程序的链接，我建议使用 href="javascript:void(0)"，因为这会阻止浏览器对 href="#" 执行任何特殊操作，这样您就可以删除致电preventDefault()。

至于问题的根源，$("#fixedRows tbody").append(html) 是您想要的代码，因此无需尝试after()。看起来你的 html 被剥离了。尝试将$.ajax() 调用中的dataType 属性设置为html。

【讨论】：

编辑 HTML 以显示 <thead> 和 <tbody> 标签，仍然没有运气。对dataType 做了同样的事情，没有看到任何不同的结果。