jquery - jQuery form.submit() 送信する代わりにページを更新する

Question

フォームが送信されたことを検出するために .submit() を使用していますが、添付された機能を実行する代わりに、ページを更新しています。

http://chris-armstrong.com/familytreeで、(ネストされたリストを使用して) 家系図を描画するためのツールを構築しています。

子孫を追加するには、コントロールをオンにすると、<li class="add_member">+</li>それぞれ<ul>(または世代) に追加されます。

要素をクリックすると、 が とボタンで構成される に<li class="add_member">+</li>置き換え+られます。次に、送信ボタンがクリックされたことを検出するために使用し、フォームを の内容に置き換える必要がありますが、この時点ではページを更新するだけです (そして ? を URL に追加します)。<form class="add_member><input><submit>$("form.add_member").submit()<input>

私が間違っていることはありますか？以下に関数全体を添付しました。

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

            });
        }

編集: return false; の追加。ページの更新を停止しますが、.submit() に添付された関数が起動していないようです。理由はありますか?

Answer 1

1. デフォルトのフォームアクションが発生しないようにするには、送信機能に出入りするreturn false;必要があります。event.preventDefault();
2. on新しい要素がDOMに追加されたときにイベントを再バインドする必要がないように、委譲を使用してjQueryを調べる必要があります。

Answer 2

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;
            });

Answer 3

return false;の最後に必要だと思います.submit()。