javascript - jquery/ajax 在 onClick 期间不更新函数内变量的奇怪问题

Question

我有一个小问题，似乎 3 天都无法解决。我不认为是一个代码错误，但我理解变量以及为什么 onClick 事件不能正常工作

基本上我有一个页面、一个表和其中的许多行。每行都有评论图标，当您单击此图标时，将打开一个 jquery 模式，其中包含一个文本区域，您可以在其中写下您的评论评论按提交(在模式上)，评论通过 ajax 发送。

一切正常，除了:

问题是，如果我有 10 行，并且在不刷新/重新加载页面的情况下打开这 10 个图标中的每一个逐条提交我的评论，所有评论都会插入到第一行。

就好像，如果我打开第一个弹出窗口并提交，当我打开第二个弹出窗口时，则有关第一个弹出窗口的信息正在被坚持。

这是一个示例代码。

这是代表模式的简单代码

<!-- very minimilized example because the modal has no issues -->
<div class="modal fade" id="comment-viewer">
  <input type="comment" name="" id="my-comment">
  <input type="button" name="submit" class="btn-primary">
</div>

包含行和注释图标的表格，触发模式显示(onclick)

<table>
  <td><i class="title_row_id_1" onClick="open_comment_modal(this)" data-id="1"></i> </td>
  <td><i class="title_row_id_2" onClick="open_comment_modal(this)" data-id="2"></i> </td>
  <td><i class="title_row_id_3" onClick="open_comment_modal(this)" data-id="3"></i> </td>
  <td><i class="title_row_id_4" onClick="open_comment_modal(this)" data-id="4"></i> </td>
  <td><i class="title_row_id_5" onClick="open_comment_modal(this)" data-id="5"></i> </td>
</table>

打开模态并将提交的内容发送到php文件的函数

function open_comment_modal(e){
  var id = e.dataset.id
  // code to display the modal goes here. (has no issues)


$('.btn-primary').click(function(){
 var comment = $("#my-comment").val() 
var dataString = "id=" + id + "&comment=" + comment
  ajaxRequest = jQuery.ajax({
    type: "POST",
    url: "foo.php",
    data: dataString,
      success: function(response) {
       $("#my-comment").val('') // no effect
    }
});    
  $("#my-comment").val('') // no effect
})
 $("#my-comment").val('') // no effect
}

因此，在上面的示例中，在每个评论图标上按下它应该更新 id，获取评论并将其发送到数据库。

但它所做的只是将所有带有第一个打开评论的“id”的评论插入数据库。

我已禁用缓存，但仍然没有任何结果

Answer 1

这只是因为 id 变量范围问题。您正在 open_comment_modal 方法 中附加点击处理程序。你不应该这样做。相反，您应该将点击处理程序附加到该函数的外部，并从点击处理程序内的 dom 数据集中获取 id。