2010-09-23 3 views
3

Я строю очень простую страницу, которая является списком дел. Он принимает вход от пользователя через форму для новых to-dos, POST-данных, выполняемых на сервере, затем получает (почти) те же данные и добавляет их в список. Однако каждый раз, когда данные должны быть отправлены на сервер, функция $ .ajax вызывается дважды.Функция JQuery Ajax, вызываемая дважды с теми же данными

Мои ЯШ:

// 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() выполняется дважды?

Если вам нужен какой-либо другой код, я могу опубликовать его также.

+3

Вы проверили $ ('# todoform'). Данные («события»). подайте в консоль firebug, чтобы узнать, была ли она связана дважды? – Iain

+0

Кажется, что он был связан дважды. Есть ли определенная функция, которую я могу использовать для очистки всех обработчиков событий до привязки обработчика? – Puddingfox

+1

Вы можете использовать '.unbind ('submit')' для этого –

ответ

1

Возможно, onload() вызывается дважды, проверьте все его вхождения через ваш код. Если вы дважды вызываете .submit(), событие onsubmit добавляется с указанным кодом, а не заменяется.

Чтобы отладить, введите alert('anything') внутри sendtodo() и проверьте, действительно ли он вызывается дважды при отправке.

Вы также можете сделать:

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

Но было бы лучше, чтобы выяснить, почему это связываясь дважды

+0

'sendtodo()' вызывается дважды, когда я отправляю форму. Firebug показывает, что тот же слушатель привязан к моей форме дважды. – Puddingfox

5

Заменить это:

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

С этим:

$("#todoform").unbind('submit').submit(function(e) 
Смежные вопросы