jQuery form.submit() erfrischende Seite anstelle der Einreichung

Ich mit .submit() zu erkennen, wenn ein Formular abgeschickt wird, aber anstelle der Durchführung Ihrer zugehörigen Funktion, es ist erfrischend die Seite.

Ich Baue ein tool zum zeichnen von Stammbaum-Diagramme (mit verschachtelten Listen) an http://chris-armstrong.com/familytree .

Hinzufügen ein Nachkomme ist, drehen Sie die Steuerelemente auf, und es fügt <li class="add_member">+</li> jedem <ul> (oder generation).

Wenn Sie auf ein <li class="add_member">+</li> element ist, ersetzt es das + mit einem <form class="add_member> bestehend aus einem <input> und ein <submit> - Taste. Ich habe dann verwendet $("form.add_member").submit() zu erkennen, wenn der submit-button geklickt wird, und es sollte ersetzen Sie dann die form mit dem Inhalt der <input> jedoch an dieser Stelle nur die Seite aktualisiert (und fügt ein ? der URL).

Irgendwelche Ideen was ich falsch mache? Ich habe befestigt die ganze Funktion unten.

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; hält die Seite erfrischend, aber die Funktion beigefügt .submit() scheint nicht zu feuern ab, irgendwelche Ideen, warum?

hinzufügen retrun falschen Ende...des Formular-submit-Funktion///
ich fügte hinzu, die Antwort als Kommentar zuerst , soll ich es ändern, zu beantworten?/
sorry, alle antworteten etwa zur gleichen Zeit, also ging ich mit dem einen, Gaben die meisten (detail darüber nachzudenken, was wäre sehr nützlich, um Menschen, die suchen können, bis die Frage in der Zukunft). Vielen Dank für Ihre Hilfe aber nicht angenommen, Sie hätte eine Idee zum zweiten problem?

InformationsquelleAutor Chris Armstrong | 2010-12-06

  1. 18
    1. Müssen Sie return false; oder - Ereignis.preventDefault(); aus der submit-Funktion zu verhindern, dass die Standard-form action passiert.
    2. Sie in Aussehen sollte jQuery on mit delegation, so dass Sie nicht haben, um rebind Ereignisse, wenn neue Elemente Hinzugefügt werden, um den DOM.
    Danke, die re-Bindung verursacht wurde Probleme! Wird auf jeden Fall in diesem Blick.
    Oh mein Gott, für 3 Jahre habe ich unverbindlich und neubindung alle meine Veranstaltungen, wenn ich ein neues element hinzuzufügen zu meinem DOM. Ich kann nicht glauben, ich habe nie herausgefunden, zu delegieren ._.
    Die Art und Weise, es zu tun, wie von jQuery 1.7 ist die on Funktion.
    auf() scheint nicht automatisch eine Bindung an die Elemente, die Hinzugefügt werden, um das DOM-danach, im Gegensatz zu delegieren(). Oder mache ich etwas falsch?
    Lesen Sie die Dokumentation sorgfältig durch, um zu verstehen, warum, aber wenn Sie $('div').auf('click', function() { ... }); dass eine "direkte" Bindung (dh, es ist keine Delegierung getan), aber wenn Sie so etwas wie $('div').auf('click', '.löschen', function() { }); es ist ein Delegierten-handler, der die Werke für die Zukunft-Elemente als auch.

    InformationsquelleAutor Paolo Bergantino

  2. 3

    Fügen Sie einen return: false; Ihre submit-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;
            });
    Danke, das stoppte, die erfrischend, aber die Funktion beigefügt .submit() scheint nicht zu feuern, aus... irgendwelche Ideen, warum?
    Ich würd alert $('form.add_member').val() und stellen Sie sicher, es ist die Rückkehr etwas gültiges. Vielleicht ändern, die Zeile if($('form.add_member').val() == '...eigentliche element Wert...')
    Ich habe tatsächlich bekam eine Warnung direkt nach dem .submit(function() { und es ist nicht das versenden. Sehr seltsam...

    InformationsquelleAutor wajiw

  3. 2

    Ich glaube, Sie brauchen, um return false; am Ende Ihrer .submit().

    ist es in der submit-Funktion, oder direkt danach?

    InformationsquelleAutor Aaron Hathaway

  4. 0

    hinzufügen this:action="javascript:void(null)"

    zu <form>

    Dies gilt nicht bieten eine Antwort auf die Frage. Sobald Sie ausreichend Ruf Sie werden in der Lage sein Kommentar auf jedem post; stattdessen Antworten, die nicht erfordern die Klärung von asker. - Review
    sorry, ich verstehe nicht,

    InformationsquelleAutor huale Liao

Schreibe einen Kommentar