首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在onClick期间jquery/ajax没有更新函数中的变量有一个奇怪的问题

在onClick期间jquery/ajax没有更新函数中的变量有一个奇怪的问题
EN

Stack Overflow用户
提问于 2017-04-18 10:01:33
回答 4查看 140关注 0票数 0

我有一个小问题,我似乎三天内解决不了。我不认为这是代码错误,但我理解变量以及为什么onClick事件不能正常工作

基本上,我有一页,一张表格,里面有很多行。每行都有注释图标,当您单击此图标时,jquery模式会打开一个textarea,然后编写您的注释按submit (在模式上),然后通过ajax发送注释。

除了:

问题是,如果我有10行,并且没有刷新/重新加载页面,如果我一个接一个地打开这10个图标,那么提交我的注释,所有的注释都会插入到第一行中。

这就好像,如果我打开第一个弹出窗口并提交,当我打开第二个弹出窗口时,关于第一个弹出窗口的内容将被持久化。

下面是一个示例代码。

这是一个表示模式的简单代码。

代码语言:javascript
运行
复制
<!-- 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)

代码语言:javascript
运行
复制
<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文件。

代码语言:javascript
运行
复制
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,获取注释并将其发送到db。

但是它所做的就是将所有带有第一个已打开注释的id的注释插入到数据库中。

我已经禁用了缓存,但什么也没有。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-04-18 10:23:00

第二次尝试;)请尝试更改open_comment_modal(e)如下:

代码语言:javascript
运行
复制
function open_comment_modal(e){
     var id = e.dataset.id
     // code to display the modal goes here. (has no issues)
     $('.btn-primary').off('click');
     $('.btn-primary').click(function(){
     ...

因为每次调用open_comment_modal时,都会向.btn-primary追加另一个单击处理程序,而旧的处理程序仍然存在。因此,在附加新处理程序之前,必须清除前一个(无效)处理程序。

票数 0
EN

Stack Overflow用户

发布于 2017-04-18 10:27:38

这仅仅是因为id变量范围问题。您正在将单击处理程序附加到open_comment_modal method中。你不应该这么做。相反,您应该将click处理程序附加到该函数的外侧,并从单击处理程序内的dom数据集中获取id。

票数 1
EN

Stack Overflow用户

发布于 2017-04-18 10:15:30

您需要在关闭弹出窗口时重置字段,并在再次显示模式时使用新值重新填充字段。

例如,假设当您关闭弹出窗口时,您的注释框必须清空如下

代码语言:javascript
运行
复制
$("#comment-viewer").on("hidden.bs.modal", function () {
  $('#my-comment').val('');
});

希望你明白这一点..。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43469122

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档