jQuery form.submit() página de actualización en lugar de enviar

Question

Estoy usando .submit() para detectar cuando se envía un formulario, pero en lugar de realizar la función adjunta, está refrescando la página.

Estoy creando una herramienta para dibujar diagramas de árbol genealógico (usando listas anidadas) en http://chris-armstrong.com/familytree.

Para agregar un descendiente, active los controles y agrega <li class="add_member">+</li> a cada <ul> (o generación).

Al hacer clic en un elemento <li class="add_member">+</li>, que sustituye a la + con un <form class="add_member> que consiste en un <input> y un botón <submit>. Luego utilicé $("form.add_member").submit() para detectar cuándo se hace clic en el botón Enviar, y debe luego reemplazar el formulario con el contenido de <input>, sin embargo, en este punto, simplemente actualiza la página (y agrega un? A la URL).

¿Alguna idea de lo que estoy haciendo mal? He adjuntado toda la función a continuación.

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("+"); 
        } 
       }); 

      }); 
     } 

EDITAR: Adding return false; detiene la actualización de la página, pero la función adjunta a .submit() no parece activarse, ¿alguna idea de por qué?

Answer 1

1. Necesita return false; o event.preventDefault(); desde la función de envío para evitar que se produzca la acción de formulario predeterminada.
2. Debe buscar en jQuery on con la delegación para que no tenga que volver a vincular eventos cuando se agreguen nuevos elementos al DOM.

Answer 2

Creo que necesita return false; al final de su .submit().

Answer 3

Agregue un retorno: falso; a su función de presentar:?

$("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; 
      });