javascript - 如何在 ajax 调用成功函数期间将 html 内容插入到特定的 div 元素？

Question

使用下面的 ajax 脚本，我想将 html 内容插入表格内的 div 元素之一。如您所见，我有一个名为 "ajaxcom" 的主要 div 元素，但我想将 html 内容插入到具有 class = "divrep" 的 div 元素中。如何在我的 ajax 调用的成功函数 期间将 html 数据插入到 "divrep" 元素中？

Ajax 脚本:

$('#ajaxcom').on('click ', '.postrep', function () {
    var inputs = $(this).closest('div').find('input'); //finding the inputs inside the div
    var textin = $(this).closest('div').find('textarea'); //finding the textarea inside the div
    var dataObject = {
        Id: inputs.first().val(), //getting the value of the first input
        name: $(this).closest('div').find('input[class="name"]').val(), //getting/finding the value of any element inside the div
        reply: textin.first().val() //getting the value of the first textarea in the div
    };

    $.ajax({

        url: '/AjaxComms/AjaxReplies',
        type: "POST",
        data: dataObject,
        dataType: "json",
        success: function (result) {

            $.ajax({
                url: '/AjaxComms/DisplayRepPartial',
                type: "GET",
                contentType: 'application/html; charset=utf-8',
                data: dataObject,
                dataType: "html",
                success: function (result) {
                    //  $('#ajaxcom').html(result);
                    // On this part, this where I'm struggling????
                    var findiv = $(this).closest('table').find('div[class="divrep"]');
                    //   $('.divrep').html(result);
                    //  var findiv = $(this).closest('table').find('div[class="divrep"]');
                    // $(findiv).html(result);
                    findiv.html(result);

                }
            })
        },
        error: function (result) {
            alert(status);
        }
    });
});

/**Hint Part of the Ajax Call:**/

$.ajax({
    url: '/AjaxComms/DisplayRepPartial',
    type: "GET",
    contentType: 'application/html; charset=utf-8',
    data: dataObject,
    dataType: "html",
    success: function (result) {
        //  $('#ajaxcom').html(result);
        // On this part, this where I'm struggling????
        var findiv = $(this).closest('table').find('div[class="divrep"]');
        //   $('.divrep').html(result);
        //  var findiv = $(this).closest('table').find('div[class="divrep"]');
        // $(findiv).html(result);
        findiv.html(result);
    }
})

HTML View :

<div id="ajaxcom">
    <table id="mytable">@foreach (var item in Model.Comments) {
        <tr>
            <td>
                <div style="font-weight:bold;">@Html.DisplayFor(modelItem => item.name)</div>
                <p class="comment more" style="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px;  display :block; background-color: #CCCCFF">@Html.DisplayFor(modelItem => item.comment)</p>
                <p style="height:5px;margin-top:0px;margin-bottom:5px">
                    <input type="button" id="like" name="like" value="Like" style="font-weight:normal;margin-top:0px; color:blue;border:0px;background-color:inherit;cursor:pointer" />
                    <input type="button" class="Reply" name="Reply" value="Replie(s)" style="margin-bottom:10px;font-weight:normal;margin-top:0px; color:blue;border:0px;background-color:inherit;cursor:pointer" />
                </p>
                <div id="divReply" class="divrep" style=" position:relative;left:57px; overflow:auto;margin-top:0px;margin-bottom:0px">
                    <table>@foreach (var item2 in Model.Replies.Where(r => r.Id == item.Id) ) {
                        <tr>
                            <td>
                                <div style="font-weight:bold;">@Html.DisplayFor(modelItem => item2.name)</div>
                                <p class="comment more" style="margin-top:0px;margin-bottom:0px;white-space:pre-line; border-radius: 4px 4px 4px 4px; max-width :445px; min-height :5px;  display :block; background-color: #CCCCFF;">@Html.DisplayFor(modelItem => item2.reply)</p>
                            </td>
                        </tr>}</table>
                    <div>
                        <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px">
                            <input type="text" id="comidvalue" name="id" class="id" value="@Html.DisplayFor(modelItem => item.Id)" />
                        </div>
                        <br />
                        <input type="text" id="namerep" name="name" class="name" style="width:445px;resize:none" />
                        <br />
                        <textarea id="reply" name="reply" class="reply" style="width:445px;height:100px;resize:none"></textarea>
                        <br />
                        <input type="button" class="postrep" value="Post Reply" name="butname" style="cursor:pointer" />
                    </div>
                </div>
                <br />
            </td>
        </tr>}</table>
</div>

Answer 1

this ajax success 函数中的对象是指 Ajax 调用的 jqXHR 对象，而不是事件处理程序绑定(bind)到的元素。所以只需使用以下

$('#ajaxcom .postrep').closest('table').find('div.divrep').html(result);

---

或在事件处理程序的开头设置 var $this = $(this); 并使用 $this 而不是 $(this) 在 ajax 成功回调函数中。

$('#ajaxcom').on('click ', '.postrep', function () {
    var $this = $(this);
    //...^........................
    ......................
    ......................
    $.ajax({
        url: '/AjaxComms/AjaxReplies',
        type: "POST",
        data: dataObject,
        dataType: "json",
        success: function (result) {
            $.ajax({
                url: '/AjaxComms/DisplayRepPartial',
                type: "GET",
                contentType: 'application/html; charset=utf-8',
                data: dataObject,
                dataType: "html",
                success: function (result) {
                    var findiv = $this.closest('table').find('div.divrep');
                    //............^...................
                    findiv.html(result);
                }
            })
        },
        ....................
        ....................
    });
});