jQuery form.submit()刷新页面而不是提交

Question

我正在使用.submit()来检测表单何时提交,但它不是执行其附加功能,而是刷新页面.

我正在构建一个用于在http://chris-armstrong.com/familytree上绘制族树图(使用嵌套列表)的工具.

要添加后代,您可以打开控件,并将其添加<li class="add_member">+</li>到每个<ul>(或代).

当你点击一个上<li class="add_member">+</li>元素,它取代了+与<form class="add_member>包括的<input>和<submit>按钮.然后我用来$("form.add_member").submit()检测单击提交按钮的时间,然后它应该用表单的内容替换表单<input>,但此时它只刷新页面(并向URL添加？).

我有什么想法我做错了吗？我已经附上了下面的全部功能.

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

            });
        }

编辑:添加返回false; 停止页面刷新,但附加到.submit()的函数似乎没有被解雇,任何想法为什么？

Answer 1

1. 您需要return false;或event.preventDefault();来自提交功能以防止发生默认表单操作.
2. 您应该on使用委托查看jQuery ,这样您就不必在将新元素添加到DOM时重新绑定事件.