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

Я использую .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("+");
                    }
                });

            });
        }

EDIT: добавление return false; останавливает обновление страницы, но функция, связанная с .submit(), кажется, не срабатывает, любые идеи почему?

Ответ 1

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

Ответ 2

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

Ответ 3

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