jQuery form.submit () обновляет страницу вместо отправки

Question

Я использую .submit (), чтобы определить, когда форма отправлена, но вместо выполнения прикрепленной функции она обновляет страницу.

Я создаю инструмент для рисования диаграмм генеалогического дерева (используя вложенные списки) по адресу http://chris -armstrong.com / familytree .

Чтобы добавить потомка, вы включаете управление, и оно добавляет <li class="add_member">+</li> к каждому <ul> (или поколению).

При нажатии на элемент <li class="add_member">+</li> он заменяет + на <form class="add_member>, состоящий из кнопок <input> и <submit>. Затем я использовал $("form.add_member").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("+");
                    }
                });

            });
        }

РЕДАКТИРОВАТЬ: Добавление return false; останавливает обновление страницы, но функция, связанная с .submit (), похоже, не срабатывает, есть идеи почему?

Answer 1

1. Вам нужно return false; или event.preventDefault(); из функции отправки, чтобы предотвратить выполнение действия формы по умолчанию.
2. Вы должны изучить jQuery on с делегированием, поэтому вам не нужно перепривязывать события при добавлении новых элементов в DOM.

Answer 2

Добавить возврат: 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;
            });

Answer 3

Я думаю, вам нужно return false; в конце вашего .submit().

Answer 4

добавить this:action="javascript:void(null)"

до <form>