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

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

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()。

Answer 4

添加this:action="javascript:void(null)"

到<form>

jQuery form.submit（）刷新页面而不是提交

4 个答案: