15

我使用 .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() 的函数似乎没有启动，有什么想法吗？

4

4 回答 4

23
  1. 您需要通过提交功能return false;或event.preventDefault();从提交功能来防止发生默认的表单操作。
  2. 您应该on使用委托查看 jQuery，以便在将新元素添加到 DOM 时不必重新绑定事件。
于 2010-12-06T22:20:41.703 回答
4

添加返回：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;
            });
于 2010-12-06T22:20:44.337 回答
2

我认为您需要return false;在.submit().

于 2010-12-06T22:20:36.347 回答
0

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

到<form>

于 2018-07-27T04:08:11.373 回答