jQuery форма.submit () обновление страницы вместо отправки
Я использую .submit () чтобы определить, когда форма отправлена, но вместо выполнения ее прикрепленной функции она обновляет страницу.
Я создаю инструмент для рисования диаграмм генеалогического дерева (используя вложенные списки) в http://chris-armstrong.com/familytree .
чтобы добавить потомка, вы включаете элементы управления, и он добавляет <li class="add_member">+</li>
для каждого <ul>
(или поколения).
при нажатии на <li class="add_member">+</li>
элемент, it заменяет +
С <form class="add_member>
состоящий из <input>
и a . Затем я использовал $("form.add_member").submit()
чтобы определить, когда кнопка submit нажата, и это должны затем замените форму содержимым <input>
, однако в этот момент он просто обновляет страницу (и добавляет ? URL-адрес).
любые идеи, что я делаю неправильно? Я прикрепил всю функцию ниже.
function addAddListeners() {
$('li.add_member').click(function(){
//create input form
$(this).html("<form class='add_member'><input id='fn_' placeholder='Name' required autofocus /><button type='submit'>Add</button></form>")
//listen for input form submission
$("form.add_member").submit(function(){
//if input form isn't blank, create new li element with content of form, else go back to the add_member li
if($('form.add_member').val()) {
$(this).replaceWith('<li><span class="vcard" title="Click to edit this members details"><span class="edit fn">'+$('input#fn_').val()+'</span></span><ul><li class="add_member">+</li></ul></li><li class="add_member">+</li>');
addEditListeners();
addAddListeners();
} else {
alert("no change");
$(this).html("+");
}
});
});
}
EDIT: добавление return false; остановка страницы освежает, но функция прилагается .submit (), похоже, не стреляет, есть идеи, почему?
4 ответов
- вам нужно
return false;
илиevent.preventDefault();
из функции отправки, чтобы предотвратить действие формы по умолчанию. - вы должны посмотреть в jQuery
on
с делегированием, поэтому вам не нужно повторно связывать события при добавлении новых элементов в DOM.
добавьте return: false; к вашей функции отправки:
$("form.add_member").submit(function(){
//if input form isn't blank, create new li element with content of form, else go back to the add_member li
if($('form.add_member').val()) {
$(this).replaceWith('<li><span class="vcard" title="Click to edit this members details"><span class="edit fn">'+$('input#fn_').val()+'</span></span><ul><li class="add_member">+</li></ul></li><li class="add_member">+</li>');
addEditListeners();
addAddListeners();
} else {
alert("no change");
$(this).html("+");
}
});
return false;
});