使用相同数据调用两次 JQuery Ajax 函数答案

【问题标题】：JQuery Ajax function called twice with same data使用相同数据调用两次 JQuery Ajax 函数
【发布时间】：2010-09-23 03:59:23
【问题描述】：

我正在构建一个非常简单的页面，它是一个待办事项列表。它通过新的待办事项表单接受用户的输入，将待办事项发布到服务器，然后接收（几乎）相同的数据并将其添加到列表中。但是，每次数据应该发送到服务器时，$.ajax 函数都会被调用两次。

我的js：

// todo.js
function onload() {
 $( "#datepicker" ).datepicker();
 $( "#todoform" ).submit(function(e){
  e.preventDefault();
  sendtodo();
  return false;
 });
}
function sendtodo() {
 $.ajax({
  url: '/blog/todo/newtodo/',
  type: "POST",
  success: function(data) {
   receivetodo(data);
  },
  data: ({
   body: $('#newbodytextarea').val(),
   title: $('#titleinput').val(),
   dateDue: $('#datepicker').val(),
   time: $('#timepicker').val(),
   category: $('#newcategory').val()}),
});
}
function receivetodo(data) {
 $('#todobody').append(data);
}

还有我的 HTML 的一部分：

<html>
<head>
<title>Todo list</title>
<link href="/django_media/css/todo/todo.style.css" rel="stylesheet" type="text/css">
<link href="/django_media/css/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/django_media/js/jquery.js"></script>
<script type="text/javascript" src="/django_media/js/jquery-ui-custom.js"></script>
<script type="text/javascript" src="/django_media/js/todo/todo.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  onload();
 });
</script>
</head>
<body>
[.................]
</body>
</html>

以防万一，我将 Django 用于我的后端。返回的数据是一个<div>，其中包含几个其他<div> 标记和一些<h1> 和<p> 标记。将接收到的 HTML 附加到页面的代码部分工作正常，只是它附加了两次（并且数据确实在数据库中两次）。

我尝试使用$("#todoform").click(function(e){ 代替$("#todoform").submit(function(e){，但这并没有改变任何东西。我还确保onload() 只被调用一次。为什么sendtodo()会执行两次？

如果您需要任何其他代码，我也可以发布。

【问题讨论】：

你有没有在firebug控制台中检查过$('#todoform').data('events').submit是否已经绑定了两次？
它看起来确实被绑定了两次。在绑定处理程序之前，是否可以使用特定函数来清除所有事件处理程序？
您可以为此使用.unbind('submit')
@Yi 做到了。如果您或@lain 创建答案，我会接受。谢谢。

标签： jquery ajax django

【解决方案1】：

替换这个：

$( "#todoform" ).submit(function(e)

有了这个：

$( "#todoform" ).unbind('submit').submit(function(e)

【讨论】：

【解决方案2】：

可能onload() 被调用了两次，请通过您的代码检查它的所有出现。如果你调用.submit() 两次，onsubmit 事件会附加给定的代码，而不是替换。

要进行调试，请将alert('anything') 放入sendtodo() 中，并检查提交时是否真的被调用了两次。

你也可以这样做：

$('#todoform').removeAttr('onsubmit').submit( ...

但最好找出它被绑定两次的原因

【讨论】：

sendtodo() 在我提交表单时被调用了两次。 Firebug 显示同一个侦听器已绑定到我的表单两次。