jquery将表单切换为div，并且在提交时没有响应

Question

我在产品页面上有回复按钮评论。

当加载页面时，所有注释都从db（ajax调用）获取到某个div块，请注意每个注释都有一个reply按钮，<div class="quickReplyForm"></div>假设一次显示回复表单单击reply按钮。

加载评论（ajax）

while($row = $res->fetch_assoc()){

    $msg .= '
            <div class="bs-callout bs-callout-info">
                <h5><b>'.$row['name'].'</b> <small>'.date('M d, Y @ h:i A', strtotime($row['date'])).'</small></h5>
                <p>'.$row['comment'].'</p>
                <p><button type="button" class="btn btn-xs btn-success btn_reply" data-name="'.$row['name'].'" data-id="'.$row['id'].'"><span class="glyphicon glyphicon-share-alt"></span> Reply</button></p>
                <div class="quickReplyForm"></div>
            </div>';
}

这是回复表单，预设并隐藏在页面顶部，准备触发并显示在<div class="quickReplyForm"></div>块内：

<div class="row reply_form" style="display:none;">
<div class="col-md-6">
<form role="form" id="reply_form">
    <div class="form-group">
      <input type="text" class="form-control input-sm" name="message">
    </div>
    <button type="button" class="btn btn-success" id="btn_reply_comment">Reply Comment</button>
</form>
</div>
</div>

然后在jquery中：

$('body').on('click','.btn_reply',function(){

    var id = $(this).data('id'); //get the `id` from data property
    var name = $(this).data('name');
    //alert(id + "/" + name);

    $(this).after('<div class="quickReplyForm">'+$(".reply_form").html()+'</div>');

});

我的第一个问题是，单击<div class="quickReplyForm"></div>按钮时，每个reply块中都会显示该表单，但每次回复都会显示该表单单击按钮，怎么可以避免？以及如何在“身体”内正确显示表格？

EDITED

第二个问题，表单没有发布输入参数，参数的提醒是返回message={empty}？

$('body').on('click','#btn_reply_comment',function(){
    var parameters = $('#reply_form').serialize();
    alert(parameters);

});

感谢您的解决方案！

Answer 1

第一个回答：您需要在显示回复表单之前隐藏表单;

$('body').on('click','.btn_reply',function(){
    // Hide previous form
    $(".quickReplyForm").remove();
    var id = $(this).data('id'); //get the `id` from data property
    var name = $(this).data('name');
    $("#comment_id").val(id);
    //alert(id + "/" + name);

    $(this).after('<div class="quickReplyForm">'+$(".reply_form").html()+'</div>');

});

另一个重点是，您需要在每个打开的表单上更新回复表单的id和name字段。或者，您保存对错误评论的评论

第二个回答：在第二种情况下，您需要使用委托结构;

$('body').on('click','#btn_reply_comment',function(){
    var parameters = $(this).closest('#reply_form').serialize();
    alert(parameters);
    // ajax here
});

以下是第二个答案的工作演示： jsfiddle

修改

为了在评论表单中添加ID，

您可以通过向.reply_form添加隐藏表单来完成此操作;

<div class="row reply_form" style="display:none;">
<div class="col-md-6">
<form role="form" id="reply_form">
    <div class="form-group">
      <input type="text" class="form-control input-sm" name="message">
    </div>
    <input type="hidden" id="comment_id" value=""/>
    <button type="button" class="btn btn-success" id="btn_reply_comment">Reply Comment</button>
</form>
</div>
</div>

然后，在打开表单之前，您可以致电;

$("#comment_id").val(id);