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 ответов


  1. вам нужно return false; или event.preventDefault(); из функции отправки, чтобы предотвратить действие формы по умолчанию.
  2. вы должны посмотреть в 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;
            });

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


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

to <form>