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

            });
        }

编辑:添加 return false；停止页面刷新，但附加到 .submit() 的函数似乎没有启动，有什么想法吗？

Answer 1

1. 您需要返回 false; 或 event.preventDefault();来自提交函数以防止发生默认表单操作。
2. 你应该研究一下 jQuery on使用委托(delegate)，这样当新元素添加到 DOM 时，您就不必重新绑定(bind)事件。