I'm building a very simple page that is a to-do list. It accepts input from a user via a form for new to-dos, POSTs the to-do to the server, then receives (almost) the same data back and adds it to a list. However, every time data is supposed to be sent to the server, the $.ajax function is called twice.

我正在构建一个非常简单的页面,这是一个待办事项列表。它接受来自用户的输入,通过表格进行新的待办事项,将待办事项POST到服务器,然后接收(几乎)相同的数据并将其添加到列表中。但是,每次将数据发送到服务器时,都会调用$ .ajax函数两次。

My 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);
}

And part of my HTML:

我的部分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>

In case it matters, I am using Django for my back-end. The data that is being returned is a <div> containing a couple other <div> tags and some <h1> and <p> tags. The part of the code that appends the received HTML to the page works fine except that it appends it twice (and the data really is in the database twice).

如果它很重要,我使用Django作为我的后端。返回的数据是一个

,其中包含一些其他

标记以及一些

和

标记。将接收到的HTML附加到页面的代码部分工作正常,除了它将它附加两次(并且数据实际上在数据库中两次)。

I've tried using $("#todoform").click(function(e){ instead of $("#todoform").submit(function(e){ but that didn't change anything. I also made sure onload() is only being called once. Why is sendtodo() executing twice?

我尝试过使用$(“#todoform”)。点击(function(e){而不是$(“#todoform”)。submit(function(e){但这并没有改变任何东西。我也确定了onload ()只被调用一次。为什么sendtodo()执行两次?

If you need any other code I can post it as well.

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

2 个解决方案

#1

Replace this:

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

With this:

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

#2

Probably onload() is being called twice, check all occurrences of it through your code. If you call .submit() twice, the onsubmit event is appended with the code given, not replaced.

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

To debug, put an alert('anything') inside sendtodo() and check if it's really being called twice when submitting.

要调试,在sendtodo()中放置一个警报('任何')并检查它在提交时是否真的被调用了两次。

You can also do:

你也可以这样做:

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

But it would be better to find out why it's being bound twice

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

#1