jQuery form.submit() refreshing page instead of submitting

I'm using .submit() to detect when a form is submitted, but instead of performing its attached function, it's refreshing the page.

I'm building a tool for drawing family tree diagrams (using nested lists) at http://chris-armstrong.com/familytree .

To add a descendent, you turn controls on, and it adds <li class="add_member">+</li> to each <ul> (or generation).

When you click on an <li class="add_member">+</li> element, it replaces the + with an <form class="add_member> consisting of an <input> and a <submit> button. I've then used $("form.add_member").submit() to detect when the submit button is clicked, and it should then replace the form with the contents of the <input>, however at this point it just refreshes the page (and adds a ? to the URL).

Any ideas what I'm doing wrong? I've attached the whole function below.

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_m