Question

当用户单击编辑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>

我使用ajax发送get请求并使用$commentNew.html(commentEditForm)更新内容；

<script>
$(document).ready(function(){$(".editCommentLink").on("click", function(e) {
    e.preventDefault()
    var comment_id= $(e.target).attr("id")
    // Retrieve the top node of comment-right
    var $commentRight= $(e.target).closest(".comment-right")

    $.ajax({
        type: "GET",
        url: `/ article/comment/edit /${comment_id}`,
        success: function(data){
            var ret=JSON.parse(data)
            var body=ret['body']

            var commentEditForm= `
            <form action="#" method="post" > {% csrf_token % }
            < div class="form-group" >
            < textarea class="form-control" name="comment" id="editComment${comment_id}" >${body} < /textarea >
                        < button class="btn btn-primary" id="editSubmitBtn" > Save Edits < /button >
                        <a href="#" > cancel < /a >
            < / div >
            < /form >
            `
            var $commentNew= $commentRight.find(".post-text");
            $commentNew.html(commentEditForm);
        }, // success
    });//end of ajax
})//end edit click
</script>

但是，当我触发按钮id="editCommentBtn"提交表单数据时，没有任何反馈

   });//end of ajax
})//end edit click

$(document).ready(function (e) {
    //still in edit click event    
    $("#editCommentBtn").on("click", function (e) {
        e.preventDefault();
        alert('button clicked');
       ...
    });//submit click event
})

我尝试解决该问题，令我感到困惑的是，如果我将$(".editCommentBtn")更改为其祖父母$(".post-text")，浏览器会警告我（“单击按钮”），

我试图将var commentEditForm=的大部分分解为单个元素，例如：

$newForm = $('<form action="#" method="post" > {% csrf_token % } < /form >');
$newFormGroup = $('< div class="form - group" >< / div >');
$newText = $('< textarea class="form-control" name="comment" id="editComment${comment_id}" >${body} < /textarea >');
$newSubmit = $('< button class="btn btn-primary" id="editCommentBtn" > Save Edits < /button >')
$(.post-text).append($newForm);
$newForm.append($newFormGroup);
$newFormGroup.append($newText);
$newText.after($newSubmit);

有很多体力劳动，
如何优雅地解决问题？

Answer 1

在您未呈现的代码中，我看不到带有ID #editCommentBtn的元素。但是测试一下：

$(document).on("click","#editCommentBtn",function (e) {
    e.preventDefault();
    alert('button clicked');
});

通过这种方式，您将其注入到文档中的所有元素（并具有此ID）将响应此单击功能。

从$（）。html（）

1 个答案: