jQuery form.submit() Aktualisieren der Seite anstelle des Sendens

Question

Ich verwende .submit(), um zu erkennen, wenn ein Formular übergeben wird, aber anstatt die angefügte Funktion auszuführen, wird die Seite aktualisiert.

Ich baue ein Werkzeug zum Zeichnen von Stammbaumdiagrammen (mit verschachtelten Listen) unter http://chris-armstrong.com/familytree.

Um einen Nachkommen hinzuzufügen, schalten Sie die Kontrollen ein und es fügt <li class="add_member">+</li> zu jedem <ul> (oder Generation) hinzu.

Wenn Sie auf ein <li class="add_member">+</li> Element klicken, ersetzt er die + mit einem <form class="add_member> bestehend aus einem <input> und einer <submit> Taste. Ich habe dann $("form.add_member").submit() verwendet, um zu erkennen, wenn die Schaltfläche zum Senden geklickt wird, und es sollte ersetzen Sie dann das Formular mit dem Inhalt der <input>, aber an dieser Stelle aktualisiert es nur die Seite (und fügt ein? An die URL).

Irgendwelche Ideen, was ich falsch mache? Ich habe die ganze Funktion unten angehängt.

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

      }); 
     } 

BEARBEITEN: Hinzufügen return false; stoppt die Seitenauffrischung, aber die an .submit() angehängte Funktion scheint nicht abzufeuern, irgendwelche Ideen warum?

Answer 1

1. Sie müssen return false; oder event.preventDefault(); von der Senden-Funktion, um die Standardformularaktion zu verhindern.
2. Sie sollten in jQuery on mit Delegation suchen, so dass Sie keine Ereignisse neu binden müssen, wenn neue Elemente zum DOM hinzugefügt werden.

Answer 2

Ich denke, Sie müssen return false; am Ende Ihrer .submit().

Answer 3

Fügen Sie eine Rückgabe hinzu: false; auf Ihre einreichen Funktion:

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