javascript - jQuery Ajax 函数仅适用于 while 循环中的第一个结果

Question

我的 jQuery Ajax 函数仅适用于 while 循环的第一个结果。当我输入数据并按 Enter 键时，数据将插入到数据库中，但这仅适用于第一个表单，即 while 循环的第一个结果。对于从 while 循环生成的其他形式，它不起作用。我有即使分配了一个唯一的 ID，但它仍然不起作用。

jQuery Ajax 函数:

$(document).on('keydown', '.replyarea', function(event) {
    var comtr = $(".replyarea").val();
    if(comtr!=''){
        if(event.keyCode == 13 && !event.shiftKey) {
            var rid = $(this).attr('id');
            var commentId = rid.replace("replycomment_", "");
            createReply(commentId);
            event.preventDefault();  
        }
    }
});

function createReply(commentId){
  var creply = $('#replycomment_'+commentId).val();
  $.ajax({
      url: "post-replies.php",type: "POST",
      data: {creply : creply, cmtid : commentId},
      success: function (data) {
        $("#showreply_"+commentId).append(data);
      },
      error: function () {
        alert("Ooops!! Problem Ocurred. Please try again later. If problem persists, please contact support!");
      },
      complete: function(xhr) {
        $('#replycomment_'+commentId).val('');
      }
  })
}

PHP:

<?php while($fetch_cmts = $get_cmtq->fetch()){ extract($fetch_cmts); ?>

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width" id="cmt_form_id_<?php echo $cmt_id; ?>">

<input type="hidden" name="comment_id" value="<?php echo $cmt_id; ?>" id="cmtsid_<?php echo $cmt_id; ?>" />

<textarea name="reply" placeholder="Give a reply..." class="reply-comment-field replyarea" id="replycomment_<?php echo $cmt_id; ?>"></textarea>

</form>

<?php } ?>

Answer 1

我将 $(document).on('keydown', '.replyarea', function(event) { 更改为 $('.replyarea').keydown(function (event ) { 它对我有用。修改了几行代码。它可能对你有帮助。

$('.replyarea').keydown(function (event) {
  if (event.keyCode == 13) {
    var id = $(this).attr('id'); 
    var commentId = id.replace("replycomment_", "");
    var reply = $("#replycomment_"+commentId).val();
    if(reply != ""){
      event.preventDefault();
      createReply(commentId);
    }
  }
});

function createReply(commentId){
  var creply = $('#replycomment_'+commentId).val();
  $.ajax({
      url: "post-replies.php",type: "POST",
      data: {creply : creply, cmtid : commentId},
      success: function (data) {
        $("#showreply_"+commentId).append(data);
      },
      error: function () {
        alert("Ooops!! Problem Ocurred. Please try again later. If problem persists, please contact support!");
      },
      complete: function(xhr) {
        $('#replycomment_'+commentId).val('');
      }
  })
}