Question

我打算在“问答”底部的下方写一个“编辑”链接，作为stackoverflow的内容：

我写了一个编辑glyphicon并获得了一个表彰。

<div class="post-menu pull-left">
    <a class="editCommentLink" href="#">
        <span id="{{ comment.id }}"  class="glyphicon glyphicon-edit" aria-hidden="true">edit </span>
    </a> &nbsp
    <a class="delCommentLink" id="{{ comment.id }}" href="#">
        <span id="{{ comment.id }}" class="glyphicon glyphicon-trash" aria-hidden="true">delete</span>
    </a>
</div>

在javascript中，当单击编辑图标时，将向URL发出ajax获取请求，并在成功后显示预先配制的表单；在成功范围内，
我写了另一个ajax发送更新的评论，它的结构很像：

<script>
$(document).ready(function () {
    $(".editCommentLink").on("click", function (e) {
        e.preventDefault();
        //trigger to show the form template
        $.ajax({
            type: "GET",
            url: `/article/comment/edit/${comment_id}`,
            success: function (data) {
                var commentEditForm = `
            <form action="#" method="post"> {% csrf_token %}
            <textarea></textarea>
            <button class="btn btn-primary" id="editCommentBtn">Save Edits</button >          
            </form >`;
                $commentNew.html(commentEditForm);

                //submit data from the newly emerged form, 
                $("#editCommentBtn").on("click", function (e) {
                    e.preventDefault();
                    $.ajax({
                        type: "POST",
                        url: `/article/comment/edit/${comment_id}`,
                        data: param,
                        success: function (data) {
                            ret = JSON.parse(data);
                            alert(ret['status']);
                            viewedComment = simplemde.options.previewRender(comment);
                            updatedComment = '<p>' + viewedComment + '</p>';
                            alert(comment)
                            $commentNew.html(updatedComment);
                            $additionalInfo.show();
                        },
                    });//post-ajax
                });//submit click event
            },//success
        });//ajax.get
    }); //edit click event
</script>

代码达到了我的预期，
但是嵌套太多了
可以用平面代码解决问题吗？

Answer 1

删除第二个单击事件，将其移至ajax事件之外

<script>
$(document).ready(function () {
    $(".editCommentLink").on("click", function (e) {
        e.preventDefault();
        //trigger to show the form template
        $.ajax({
            type: "GET",
            url: `/article/comment/edit/${comment_id}`,
            success: function (data) {
                var commentEditForm = `
            <form action="#" method="post"> {% csrf_token %}
            <textarea></textarea>
            <button class="btn btn-primary" id="editCommentBtn">Save Edits</button >          
            </form >`;
                $commentNew.html(commentEditForm);
            },//success
        });//ajax.get
        //submit data from the newly emerged form, 
    $("body").on("click","#editCommentBtn", function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: `/article/comment/edit/${comment_id}`,
            data: param,
            success: function (data) {
                ret = JSON.parse(data);
                alert(ret['status']);
                viewedComment = simplemde.options.previewRender(comment);
                updatedComment = '<p>' + viewedComment + '</p>';
                alert(comment)
                $commentNew.html(updatedComment);
                $additionalInfo.show();
            },
        });//post-ajax
    });//submit click event
    }); //edit click event
</script>

展平嵌套的ajax请求

1 个答案: