Question

我正在构建一个非常简单的页面，这是一个待办事项列表。它接受来自用户的输入，用于新的待办事项表单，将待办事项POST到服务器，然后接收（几乎）相同的数据并将其添加到列表中。但是，每次将数据发送到服务器时，都会调用$ .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()执行两次？

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

Answer 1

替换它：

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

有了这个：

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

Answer 2

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

要进行调试，请将alert('anything')置于sendtodo()内，并在提交时检查它是否真的被调用了两次。

你也可以这样做：

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

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

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

2 个答案: